/* =============================================================
   director_v2.0.0.css
   Konsolidiertes Stylesheet für die Hauptanwendung
   Ersetzt: theme_v1.44.0.css + rebrand_v1.0.7.css
   ============================================================= */


/* === 1. DESIGN TOKENS (:root) === */

:root {
  /* Typografie */
  --font-family-base: 'Inter', Arial, Helvetica, sans-serif;
  --font-family-heading: 'ES Build', Arial, sans-serif;
  --font-size-base: 11px;
  --font-size-breadcrumb-hierarchy: 16px;
  --font-size-breadcrumb: 11px;
  --font-size-breadcrumb-active: 11px;
  --font-size-heading: 16px;

  /* Maximale Breite des Inhalts */
  --max-content-width: 1680px;
  
  /* Primäre Farben */
  --primary-blue: #2843B5;
  --primary-yellow: #FEBA37;
  --secondary-blue: #CBE8F7;
  --secondary-yellow: #A97500; 

  /* Hintergrundfarben */
  --bg-dark: #3E3D3A;
  --bg-light: #f9f9f9;  /* Default: leicht gräulich, wird im Light Mode überschrieben */
  --bg-medium: #eeeeee;
  --bg-lighter: #FFFFFF;
  --bg-highlight: #F8F9F7;
  --bg-hover: #E5E9F6;
  --bg-active: #c2c9e4;

  /* Text und Rand Farben */
  --text-dark: #1F1F1F;
  --text-medium: #313D46;
  --text-light: #575757;
  --text-lighter: #787878;
  --text-inactive: #b0b0b0;
  --border-light: #E2E3E1;
  --border-medium: #ccc;

  /* Status Farben */
  --warning-bg: #FFC213;
  --warning-border: #EAAE00;
  --warning-light-bg: #FFF4C2;
  --warning-light-border: #FFCC33;
  --error-text: #d32f2f;
  --success-text: #388e3c;

  /* Planungsfarben */
  --plan-text: #000000;
  --plan-working-bg: #FFFFFF;
  --plan-holiday-bg: #6BC0DF;
  --plan-saturday-bg: #B7F0FF;
  --plan-inactive-bg: #999999;
  --plan-alert-bg: #EECB33;

  /* Status-Zeilen-Highlighting */
  --selected-bg: #FF9933;

  /* Meldungsfarben */
  --msg-success-bg: #c2f7be;
  --msg-success-border: #0e9c03;

  /* Toast Messages - Info/Success */
  --msg-info-bg: #d1fae5;
  --msg-info-text: #065f46;
  --msg-info-border: #10b981;

  /* Toast Messages - Warning */
  --msg-warn-bg: #fef3c7;
  --msg-warn-text: #78350f;
  --msg-warn-border: #f59e0b;

  /* Toast Messages - Error */
  --msg-error-bg: #fecaca;
  --msg-error-text: #7f1d1d;
  --msg-error-border: #ef4444;

  /* Toast Messages - Fatal */
  --msg-fatal-bg: #fca5a5;
  --msg-fatal-text: #7f1d1d;
  --msg-fatal-border: #dc2626;

  /* Häufig verwendete Rundungen */
  --border-radius-small: 4px;
  --border-radius-medium: 6px;
  --border-radius-large: 12px;

  /* Schatten */
  --shadow-small: 0 2px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-large: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* Übergänge */
  --transition-standard: all 0.3s ease;
  --transition-button: background-color 0.3s ease, transform 0.2s ease;

  /* Sidebar */
  --sidebar-width-expanded: 220px;
  --sidebar-width-collapsed: 52px;
  --sidebar-bg: #1e2330;
  --sidebar-text: #c8cdd8;
  --sidebar-text-active: #ffffff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-icon-size: 18px;

  /* Layout-Höhe für Fixed Header */
  --header-height: 60px;

  /* Minimale Content-Breite */
  --min-content-width: 900px;
}


/* === 2. SCHRIFTARTEN === */

@font-face {
  font-family: 'Inter';
  src: url('../layout/fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../layout/fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../layout/fonts/inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ES Build';
  src: url('../layout/fonts/es-build/ESBuild-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* === 3. RESET & GRUNDSTILE === */

* {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
}

body {
	background: none;
	background-color: var(--bg-light);
	color: var(--text-dark);
	display: block;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading);
}

.body-light {
	background-color: var(--bg-light);
}

img {
	border-style: none;
}

p {
}

blockquote {
	margin-left: 2em;
	margin-right: 2em;
	font-style: italic;
}

ul {
}

ul li {
}

ol {
}

ol li {
}

table ul {
	list-style-type: disc;
	margin-left: 15px;
	padding-left: 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
	padding: 8px 8px;
	background: none;
}

button[type="button"], button[type="reset"], button[type="submit"],
input[type="reset"], input[type="submit"], input[type="button"] {
	padding: 6px 12px;
	font-size: 12px;
	font-weight: normal;
	color: var(--text-medium);
	background-color: var(--bg-lighter);
	border: solid 1px var(--border-light);
	border-radius: var(--border-radius-medium);
	cursor: pointer;
	transition: var(--transition-button);
}

button[type="button"]:hover, button[type="reset"]:hover, button[type="submit"]:hover,
input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
	background-color: var(--bg-hover);
}

button[type="button"]:active, button[type="reset"]:active, button[type="submit"]:active,
input[type="reset"]:active, input[type="submit"]:active, input[type="button"]:active {
	transform: scale(0.98);
	background-color: var(--bg-active);
}

button.primary[type], input.primary[type], .rich-button.primary {
	background-color: var(--primary-yellow);
	color: var(--text-dark);
	border-color: var(--warning-border);
	font-weight: 600;
	/*padding: 8px 18px;
	font-size: 13px;*/
	min-width: 80px;
}

button.primary[type]:hover, input.primary[type]:hover, .rich-button.primary:hover {
	background-color: var(--warning-border);
}

button.primary[type]:active, input.primary[type]:active, .rich-button.primary:active {
	background-color: #e09800;
}

button.primary[type]:disabled,
input.primary[type]:disabled,
.rich-button.primary[disabled],
.rich-button.primary.rich-button-disabled {
	background-color: #FFEAC3;
	color: #C9973A;
	border-color: #FDDEA0;
	cursor: not-allowed;
}

button.primary[type]:disabled:hover,
input.primary[type]:disabled:hover,
.rich-button.primary[disabled]:hover,
.rich-button.primary.rich-button-disabled:hover {
	background-color: #FFEAC3;
}


/* === 3. HAUPTLAYOUT === */

/* --- Sidebar --- */

.sidebar {
	width: var(--sidebar-width-expanded);
	height: 100vh;
	background-color: var(--sidebar-bg);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	transition: var(--sidebar-transition);
	border-right: 1px solid var(--sidebar-border);  /* Vertikale Linie am rechten Rand */
}

/* === THEME TRANSITION ANIMATIONS === */

/* Sidebar Text und Icon Transitions */
.sidebar-logo-text,
.sidebar-toggle,
.sidebar-nav li a,
.sidebar-nav li .nav-link,
.sidebar-user,
.sidebar-user-link,
.sidebar-user-name,
.sidebar-version,
.sidebar-theme-toggle-icon {
	transition: color 0.3s ease, background-color 0.3s ease;
}

#sidebarNav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--sidebar-border) transparent;
}

.sidebar.collapsed {
	width: var(--sidebar-width-collapsed);
}

.sidebar.collapsed ~ #main-wrapper {
	margin-left: var(--sidebar-width-collapsed);
}

.sidebar.collapsed ~ #main-wrapper #headerContent {
	left: var(--sidebar-width-collapsed);
}

/* Kopfbereich */
.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 10px 12px 12px;
	border-bottom: 1px solid var(--sidebar-border);
	min-height: 52px;
	flex-shrink: 0;
}

.sidebar-logo-link {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	text-decoration: none;
	overflow: hidden;
}

.sidebar-logo-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 6px;
	display: block;
}

.sidebar-logo-text {
	font-family: var(--font-family-heading);
	font-size: 26px;
	font-weight: 300;
	color: var(--sidebar-text-active);
	white-space: nowrap;
	overflow: hidden;
	transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 140px;
	opacity: 1;
	align-self: flex-end;
	line-height: 1.12;
}

.sidebar.collapsed .sidebar-logo-text {
	max-width: 0;
	opacity: 0;
}

/* Collapsed: Favicon + Toggle vertikal gestapelt, zentriert */
.sidebar.collapsed .sidebar-header {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
}

.sidebar.collapsed .sidebar-logo-link {
	justify-content: center;
}

/* Transition unterdrücken beim initialen Laden (kein Flash of Animated Transition) */
html[data-sidebar-init] .sidebar {
	transition: none !important;
	width: var(--sidebar-width-collapsed);
}

html[data-sidebar-init] .sidebar * {
	transition: none !important;
}

html[data-sidebar-init] #main-wrapper {
	transition: none !important;
	margin-left: var(--sidebar-width-collapsed);
}

html[data-sidebar-init] #main-wrapper #headerContent {
	transition: none !important;
}

/* Toggle-Button */
button.sidebar-toggle {
	background: none;
	border: 1px solid transparent;
	color: var(--sidebar-text);
	cursor: pointer;
	padding: 4px 6px;
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: border-color 0.2s ease, color 0.2s ease;
	font-size: 14px;
	box-shadow: none;
}

button.sidebar-toggle:hover {
	border-color: var(--sidebar-border);
	color: var(--sidebar-text-active);
	background: none;
}

.sidebar-toggle i {
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	font-size: 14px;
}

.sidebar.collapsed .sidebar-toggle i {
	transform: rotate(180deg);
}

/* Navigations-Listen */
.sidebar-nav {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.sidebar-nav li {
	position: relative;
}

.sidebar-nav li a,
.sidebar-nav li .nav-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: var(--sidebar-text);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color 0.2s ease, color 0.2s ease;
	border-left: 3px solid transparent;
	font-size: 13px;
}

.sidebar-nav li a i,
.sidebar-nav li .nav-link i {
	font-size: var(--sidebar-icon-size);
	flex-shrink: 0;
	width: 20px;
	text-align: center;
}

.sidebar-nav li a:hover,
.sidebar-nav li .nav-link:hover {
	background-color: var(--sidebar-hover-bg);
	color: var(--sidebar-text-active);
}

.sidebar-nav li.active a,
.sidebar-nav li.active .nav-link {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-text-active);
	font-weight: bold;
	border-left-color: var(--primary-yellow);
}

.sidebar-nav li.flyout-active a,
.sidebar-nav li.flyout-active .nav-link {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-text-active);
	font-weight: bold;
	border-left-color: var(--primary-yellow);
}

.sidebar-nav li.inactive a,
.sidebar-nav li.inactive .nav-link {
	color: rgba(200, 205, 216, 0.5);  /* Erhöht von 0.35 auf 0.5 für besseren Kontrast */
	pointer-events: none;
	cursor: default;
	border-left-color: transparent;
}

/* Nav-Labels ausblenden wenn eingeklappt */
.nav-label {
	overflow: hidden;
	white-space: nowrap;
	transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 160px;
	opacity: 1;
}

.sidebar.collapsed .nav-label {
	max-width: 0;
	opacity: 0;
}

/* Tooltip (JavaScript-generiert) */
.sidebar-tooltip {
	position: fixed;
	background-color: #333;
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 10000;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	display: none;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

/* Sidebar-Footer (unterer Bereich) */
.sidebar-footer {
	margin-top: 0;
	flex-shrink: 0;
	border-top: none;
	padding-top: 0;
	background-color: transparent;
	display: flex;
	flex-direction: column;
}

.sidebar-bottom-nav {
	border-top: 1px solid var(--sidebar-border);
	padding: 4px 0;
}

/* Separator für Menügruppen */
.sidebar-nav li.separator {
	border-top: 1px solid var(--sidebar-border);
	margin-top: 8px;
	padding-top: 8px;
}

/* Benutzer-Bereich */
.sidebar-user {
	position: sticky;
	bottom: 0;
	padding: 8px 0;
	border-top: 1px solid var(--sidebar-border);
	background-color: var(--sidebar-bg);
	z-index: 10;
}

.sidebar-user-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	color: var(--sidebar-text);
	text-decoration: none;
	overflow: hidden;
}

.sidebar-user-icon {
	font-size: var(--sidebar-icon-size);
	flex-shrink: 0;
	width: 20px;
	text-align: center;
}

.sidebar-user-name {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
	transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 120px;
	opacity: 1;
}

.sidebar.collapsed .sidebar-user-name {
	max-width: 0;
	opacity: 0;
}

.sidebar-logout-btn {
	color: var(--sidebar-text);
	text-decoration: none;
	padding: 2px 8px;
	border-radius: var(--border-radius-small);
	flex-shrink: 0;
	font-size: var(--sidebar-icon-size);
	transition: color 0.2s ease, background-color 0.2s ease;
	overflow: hidden;
	transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 40px;
	opacity: 1;
}

.sidebar.collapsed .sidebar-logout-btn {
	display: flex;
	align-items: center;
	max-width: none;
	opacity: 1;
	padding: 10px 14px;
}

.sidebar.collapsed .sidebar-logout-btn i {
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sidebar.collapsed .sidebar-user-icon {
	display: none;
}

.sidebar.collapsed .sidebar-user-name {
	display: none;
}

.sidebar.collapsed .sidebar-user-link {
	display: block;
	padding: 0;
}

.sidebar-logout-btn i {
	font-size: var(--sidebar-icon-size);
}

.sidebar-logout-btn:hover {
	color: var(--sidebar-text-active);
	background-color: var(--sidebar-hover-bg);
}

/* --- Seiteninhalt --- */

#main-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--bg-light);
	margin-left: var(--sidebar-width-expanded);
	transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	padding-top: var(--header-actual-height, var(--header-height));
}

#page-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--bg-light);
	max-width: var(--max-content-width);
	min-width: var(--min-content-width);
	margin: 0;
	width: 100%;
	height: calc(100vh - var(--header-actual-height, var(--header-height)));
}

#headerContent {
	position: fixed;
	top: 0;
	left: var(--sidebar-width-expanded);
	right: 0;
	min-height: var(--header-height);
	background-color: var(--bg-light);
	z-index: 90;
	display: flex;
	flex-direction: column;
	padding: 0px;
	/* border-bottom: 1px solid var(--border-light); */
	transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	/*max-width: var(--max-content-width);*/
	overflow-x: hidden;
}

#content {
	flex: 1;
	background-color: var(--bg-light);
	padding: 10px 20px 20px 20px;
	overflow-y: auto;
	overflow-x: auto;
	height: calc(100vh - var(--header-actual-height, var(--header-height)));
}

/* Content Theme Transitions */
#main-wrapper,
#page-content,
#headerContent,
#content {
	transition: background-color 0.3s ease;
}

#footer {
	height: 30px;
	background: url(../img/footer.png) no-repeat;
}

#systemMessage {
	background-color: transparent;
	border: 2px solid transparent;
	list-style-type: none;
	margin-bottom: 8px;
	padding: 6px 12px;
	flex-shrink: 0;
}

#systemMessage.active {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	background-color: var(--warning-bg);
	border-color: var(--warning-border);
}

#browserMessage {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-color: #FFE4E1;
	border-style: solid;
	border-width: 2px;
	border-color: #9D0C0D;
	list-style-type: none;
	margin-bottom: 10px;
	padding: 3px;
}

.sidebar-version {
	padding: 4px 14px 8px;
	font-size: 10px;
	color: rgba(200, 205, 216, 0.6);  /* Erhöht von 0.35 auf 0.6 für bessere Sichtbarkeit */
	white-space: nowrap;
	overflow: hidden;
	transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	max-width: 200px;
	opacity: 1;
	background-color: var(--sidebar-bg);
}

.sidebar.collapsed .sidebar-version {
	max-width: 0;
	opacity: 0;
	padding: 0;
}


/* === 4. NAVIGATION === */

/* === BREADCRUMBS: Moderne zweistufige Struktur === */

/* === ALTE BREADCRUMBS (Standard, ohne .breadcrumb-new) === */

/* Container für alte Breadcrumbs */
#breadcrumbs,
#breadcrumbsLocked {
	color: var(--text-lighter);
	margin: 10px 0px;
	padding: 0px 20px;
	padding-bottom: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);  /* Sehr subtiler Schatten */
	min-width: 0;  /* Als Flex-Item von #headerContent: verhindert Expansion über Header-Breite hinaus */
}

/* Links in alten Breadcrumbs */
#breadcrumbs a {
	color: var(--text-lighter);
}

/* Hover-Effekt für Links in alten Breadcrumbs */
#breadcrumbs a:hover {
	color: var(--primary-blue);
	padding-bottom: 5px;
	border-bottom: 2px solid var(--primary-yellow);
}

/* Locked Breadcrumbs (Edit-Mode) */
#breadcrumbsLocked {
	line-height: 1.6;
	opacity: 0.7;
	pointer-events: none;
	padding: 10px 20px 0 20px;
	min-width: 0;  /* Verhindert Expansion über #headerContent hinaus */
}

/* Edit-Indikator für locked Breadcrumbs */
.breadcrumb-edit-indicator {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--text-lighter);
	font-size: 11px;
	font-weight: 500;
	margin-bottom: 6px;
	opacity: 1;  /* Volle Deckkraft für den Indikator */
}

.breadcrumb-edit-indicator i {
	font-size: 13px;
}

/* === NEUE BREADCRUMBS (mit .breadcrumb-new Klasse) === */

/* Container für neue Breadcrumbs (überschreibt alte Regeln) */
#breadcrumbs:has(.breadcrumb-new) {
	padding: 10px 20px 0 20px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: none;  /* Kein Schatten für neues System */
	min-width: 0;  /* Verhindert Expansion über #headerContent hinaus */
}

/* Deaktiviere alte Link-Styles für neue Breadcrumbs */
#breadcrumbs:has(.breadcrumb-new) a {
	color: inherit;  /* Erbt von .breadcrumb-link */
	padding-bottom: 0;
	border-bottom: none;
}

#breadcrumbs:has(.breadcrumb-new) a:hover {
	color: inherit;  /* Erbt von .breadcrumb-link:hover */
	padding-bottom: 0;
	border-bottom: none;
}

/* --- Ebene 1: Haupt-Breadcrumb (Hierarchie) --- */

.breadcrumb-hierarchy {
	font-family: var(--font-family-heading);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-breadcrumb-hierarchy);
	font-weight: 400;
	color: var(--text-dark);
	overflow-x: auto;
	overflow-y: hidden;
	min-width: 0;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* ALLE Children von .breadcrumb-hierarchy explizit setzen */
.breadcrumb-hierarchy *,
.breadcrumb-hierarchy > a,
.breadcrumb-hierarchy > span {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-breadcrumb-hierarchy);
}

.breadcrumb-hierarchy .breadcrumb-link {
	font-family: var(--font-family-heading);
	color: var(--text-lighter);
	text-decoration: none;
	transition: color 0.2s ease;
	font-size: var(--font-size-breadcrumb-hierarchy);
	white-space: nowrap;
	flex-shrink: 0;
}

.breadcrumb-hierarchy .breadcrumb-link:hover {
	font-family: var(--font-family-heading);
	color: var(--primary-blue);
}

.breadcrumb-separator {
	font-family: var(--font-family-heading);
	color: var(--text-lighter);
	font-weight: 300;
	margin: 0 4px;
	font-size: var(--font-size-breadcrumb-hierarchy);
}

.breadcrumb-current {
	color: var(--text-dark);
	font-weight: 500;
	font-size: var(--font-size-breadcrumb-hierarchy);
	white-space: nowrap;
	flex-shrink: 0;
}

.breadcrumb-hierarchy .breadcrumb-separator {
	flex-shrink: 0;
}

/* --- Ebene 2: Tab-Navigation --- */

.breadcrumb-tabs {
	display: flex;
	gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 1px;  /* Platz für Unterstreichung */
	border-bottom: 1px solid var(--border-light);

	/* Scrollbar Styling (modern & subtil) */
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Webkit Scrollbar (Chrome, Safari, Edge) */
.breadcrumb-tabs::-webkit-scrollbar {
	height: 1px;
}

.breadcrumb-tabs::-webkit-scrollbar-track {
	background: transparent;
}

.breadcrumb-tabs::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 1px;
}

.breadcrumb-tabs::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

/* Webkit Scrollbar für .breadcrumb-hierarchy (Chrome, Safari, Edge) */
.breadcrumb-hierarchy::-webkit-scrollbar {
	height: 1px;
}

.breadcrumb-hierarchy::-webkit-scrollbar-track {
	background: transparent;
}

.breadcrumb-hierarchy::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 1px;
}

.breadcrumb-hierarchy::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

/* Einzelner Tab */
.breadcrumb-tab {
	padding: 6px 16px !important;
	color: var(--text-lighter);
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--font-size-breadcrumb);
	font-weight: 500;
	border-bottom: 3px solid transparent;
	transition: color 0.2s ease, background-color 0.2s ease;
	cursor: pointer;
	flex-shrink: 0;  /* Verhindert Schrumpfung bei wenig Platz */
	display: flex;
	align-items: center;
}

/* Stelle sicher, dass ALLE Kinder die gleichen Styles erben */
.breadcrumb-tab *,
.breadcrumb-tab > a,
.breadcrumb-tab > span {
	font-size: var(--font-size-breadcrumb);  /* 12px - explizit setzen! */
	color: var(--text-lighter);  /* #575757 - explizit setzen! */
}

/* Links in Tabs (s:link rendert als <a>) */
.breadcrumb-tab a {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
}

/* Tab Hover - mit Hintergrund-Hervorhebung */
.breadcrumb-tab:hover {
	background-color: var(--bg-hover);
	color: var(--primary-blue);
}

/* Aktiver Tab */
.breadcrumb-tab.active {
	font-size: var(--font-size-breadcrumb-active);
	color: var(--text-dark) !important;
	font-weight: 600;
	border-bottom: 3px solid var(--primary-yellow) !important;
}

/* Aktiver Tab - zusätzliche Spezifität mit Element-Selektor */
a.breadcrumb-tab.active {
	border-bottom: 3px solid var(--primary-yellow) !important;
}

/* Aktive Tab Kinder - explizit setzen */
.breadcrumb-tab.active *,
.breadcrumb-tab.active > a,
.breadcrumb-tab.active > span {
	font-size: var(--font-size-breadcrumb-active);  /* 13px */
	color: var(--text-dark);  /* #1F1F1F */
}

/* Badge mit der Anzahl offener Tickets (Status != CLOSED) an den Workflow-Tabs.
   Eigener Selektor mit gleicher/hoeherer Spezifitaet als .breadcrumb-tab * -> setzt Farbe/Groesse
   unabhaengig vom (aktiven) Tab-Text. */
.breadcrumb-tab .tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 5px;
	/* Negative vertikale Margin: Badge darf die Tab-Hoehe nicht vergroessern,
	   sonst liegt der GroupLabel tiefer als die Nachbar-Tabs. */
	margin: -2px 0 -2px 3px;
	border: 1px solid #f3d6a0;
	border-radius: 99px;
	background: #fdf1dc;
	color: #a35f06 !important;
	font-size: 9px !important;
	font-weight: 700;
	line-height: 1;
}

#conversations {
	height: 27px;
	float: right;
	margin: 0px 3px 2px 2px;
	color: #FFFFFF;
}


/* === 5. UTILITY-KLASSEN === */

.empty {
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.centered {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.uppercase {
	text-transform: uppercase;
}

.inactiveText {
	color: #A9A9A9;
}

.headerText {
	color: var(--text-medium);
}

.radioGroupLine {
}

.radioGroupLine td {
	padding-right: 10px;
}

/* PanelGrid Column Classes */
.label {
	font-weight: normal;
	color: var(--text-light);
	text-align: left;
	padding-left: 10px;
}

.labelWidth20 { width: 20px; }
.labelWidth40 { width: 40px; }
.labelWidth45 { width: 45px; }
.labelWidth50 { width: 50px; }
.labelWidth60 { width: 60px; }
.labelWidth80 { width: 80px; }
.labelWidth100 { width: 100px; }
.labelWidth110 { width: 110px; }
.labelWidth120 { width: 120px; }
.labelWidth130 { width: 130px; }
.labelWidth140 { width: 140px; }
.labelWidth150 { width: 150px; }
.labelWidth160 { width: 160px; }
.labelWidth180 { width: 180px; }
.labelWidth200 { width: 200px; }
.labelWidth240 { width: 240px; }

.centeredlabel {
	font-weight: bold;
	text-align: center;
}

.field {
	padding-left: 10px;
}

.label2 {
	font-weight: normal;
	color: var(--text-light);
	text-align: left;
	padding-left: 20px;
}

.field2 {
	padding-left: 10px;
	min-width: 100px;
}

.table3 {
	border-spacing: 0px;
}

.label3 {
	font-weight: bold;
	text-align: right;
	padding: 3px 3px 3px 10px;
}

.field3 {
	padding: 3px 3px 3px 10px;
}

.label4 {
	font-weight: bold;
	text-align: right;
	padding: 3px 3px 3px 10px;
}

.field4 {
	padding: 3px 3px 3px 10px;
	min-width: 100px;
}

.label5 {
	font-weight: bold;
	text-align: right;
	padding-left: 10px;
}

.height1em {
	height: 1em;
}

.validation {
}

.row {
	height: 1.5em;
}

.verticalTop {
	vertical-align: top;
}

.verticalMiddle {
	vertical-align: middle;
}

.verticalTextBottom {
	vertical-align: text-bottom;
}

.rowVTop {
	height: 1.5em;
	vertical-align: text-top;
}

.rowVTop ul {
	list-style-type: none;
}

.rowTopMargin {
	margin-top: 5px;
}

.rowForm {
	height: 1.8em;
}

.rowButtons {
	margin: 10px;
}

.rowButtons[disabled] {
	margin: 10px;
	color: gray;
}

.rowButtons2 {
	margin: 0px 10px 10px 10px;
}

/* Row Classes */
.rowEven {
	height: 1.5em;
	background-color: var(--bg-lighter);
}

.rowOdd {
	height: 1.5em;
	background-color: var(--bg-highlight);
}

.rowEven1em {
	height: 1em;
	background-color: var(--bg-lighter);
}

.rowOdd1em {
	height: 1em;
	background-color: var(--bg-highlight);
}

.thirdWidth {
	width: 33%;
}

.halfWidth {
	width: 50%;
}

.cfRowEven {
	background-color: var(--bg-highlight);
	vertical-align: top;
}

.cfRowOdd {
	background-color: var(--bg-lighter);
	vertical-align: top;
}

.even {
	background-color: var(--bg-lighter);
}

.odd {
	background-color: var(--bg-highlight);
}


/* === 6. FORMULARELEMENTE === */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
	padding: 2px 4px;
	font-size: 12px;
	border: 1px solid var(--border-medium);
	border-radius: var(--border-radius-small);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	outline: none;
}

input:focus,
textarea:focus,
select:focus {
	border-color: #5b73db;
	box-shadow: 0 0 4px rgba(40, 67, 181, 0.5);
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: #f5f5f5;
	color: #888;
	cursor: not-allowed;
}

.rich-button {
	background-position: 0;
	background-image: none;
	padding: 6px 12px !important;
	font-size: 12px;
	font-weight: normal;
	color: var(--text-medium);
	background-color: var(--bg-lighter);
	border: solid 1px var(--border-light) !important;
	border-radius: var(--border-radius-medium);
	cursor: pointer;
	transition: var(--transition-button);
}

.rich-button:hover {
	background-color: var(--bg-hover);
}

.rich-combobox-button-inactive,
.rich-combobox-button-icon-inactive,
.rich-combobox-button,
.rich-combobox-button-icon,
.rich-combobox-button-pressed,
.rich-combobox-button-icon-pressed,
.rich-combobox-button-hover,
.rich-combobox-button-icon-hover,
[id$="comboboxButton"] {
	padding: 1.5px 3px !important;
	font-size: 12px !important;
	font-weight: normal !important;
	color: var(--text-medium) !important;
	background-color: var(--bg-lighter) !important;
	background-image: url('../img/caret-down.png') !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 12px 12px !important;
	border: solid 1px var(--border-light) !important;
	border-radius: var(--border-radius-small) !important;
	cursor: pointer !important;
	transition: var(--transition-button) !important;
}

.rich-combobox-button-hover,
.rich-combobox-button-icon-hover,
.rich-combobox-button-inactive:hover,
.rich-combobox-button-icon-inactive:hover,
.rich-combobox-button:hover,
.rich-combobox-button-icon:hover,
[id$="comboboxButton"]:hover {
	background-color: var(--bg-hover) !important;
}

.rich-combobox-button-pressed,
.rich-combobox-button-icon-pressed,
.rich-combobox-button:active,
.rich-combobox-button-icon:active,
[id$="comboboxButton"]:active {
	transform: scale(0.98) !important;
	background-color: var(--bg-active) !important;
}


/* === 7. KOMPONENTEN === */

.boxed {
	margin: 20px auto;
	padding: 0px;
	background-color: var(--bg-light);
	border-radius: var(--border-radius-large);
	border: 1px solid var(--border-medium);
}

.boxed .title {
	margin-top: 0;
	background: none;
	background-color: var(--bg-medium);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 10px;
	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

.boxed .title h2 {
	margin: 0;
	padding: 15px 20px;
	font-size: var(--font-size-heading);
	font-weight: bold;
	color: var(--text-dark);
}

.boxed .content {
	margin-left: 1px;
	padding: 10px;
	border-top: 1px solid var(--bg-lighter);
	background: none;
	min-height: 30px;
	overflow-x: auto;
}

.title {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
}

.title h2 {
	max-width: 550px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
	padding-right: 0px !important;
}

/* Planungskalender */
.planMonth {
	width: 930px;
	height: 310px;
	border-style: none;
	border-width: 1px;
	border-color: #EFF6FF;
	overflow: auto;
}

.planMonthSummary {
	width: 930px;
	height: 220px;
	border-style: none;
	border-width: 1px;
	border-color: #EFF6FF;
	overflow: auto;
}

.planMonthTable {
}

.planMonthHeaderCell {
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 4px;
	padding-right: 4px;
	height: 30px;
}

.planNameCell {
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
	line-height: 22px;
}

.planCell {
	padding: 0px;
	line-height: 22px;
}

.planEdit {
	width: 30px;
	line-height: 20px;
	height: 20px;
	background-image: none;
	text-align: center;
	border: 0;
}

.planWorkingDay {
	color: var(--plan-text);
	background-color: var(--plan-working-bg);
}

.planHoliday {
	color: var(--plan-text);
	background-color: var(--plan-holiday-bg);
}

.planSunday {
	color: var(--plan-text);
	background-color: var(--plan-holiday-bg);
}

.planSaturday {
	color: var(--plan-text);
	background-color: var(--plan-saturday-bg);
}

.planAlert {
	color: var(--plan-text);
	background-color: var(--plan-alert-bg);
}

.planInactive {
	height: 20px;
	line-height: 20px;
	background-color: var(--plan-inactive-bg);
}

input.planHoliday {
	background-color: var(--plan-holiday-bg);
}

input.planSunday {
	background-color: var(--plan-holiday-bg);
}

input.planSaturday {
	background-color: var(--plan-saturday-bg);
}

input.planInactive {
	background-color: var(--plan-inactive-bg);
}

/* Modals */
.sigModal {
	display: none;
	position: fixed;
	z-index: 222;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.sigModal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 600px;
}

.sigWrapper {
	width: 600px;
	height: 200px;
	border: 1px solid #eee;
	border-bottom: 1px dotted black;
}

.fileUploadModal {
	display: none;
	position: fixed;
	z-index: 222;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.fileUploadModal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 600px;
}

.scroll {
	height: 420px;
	width: 100%;
	overflow: auto;
	border: 0px;
	padding-right: 4px;
}

.clipped-inplace-input {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 138px;
}

.clipped-inplace-input.rich-inplace {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 138px;
}

.tooltip {
	border-width: 1px;
	padding: 4px;
}

.optionList {
	height: 22px;
}

.inplaceText {
	background: none;
	cursor: pointer;
	margin-left: 5px;
	border-bottom: 1px dashed;
}

.inplacePanel {
	background: none;
	cursor: pointer;
	margin-left: 5px;
	padding-top: 7px;
	font-size: 11px;
	font-weight: bold;
	border-bottom: 1px dashed;
}

.inplaceSelect {
	background: none;
	cursor: pointer;
	margin-left: 0px;
	border-bottom: 1px dashed;
}

.inplace {
	color: var(--text-dark);
	border-color: var(--text-dark);
}

.rich-inplace-select {
	padding-top: 0px;
}

.hasTitle {
	color: black;
	text-decoration: none;
	border-color: black;
	border-bottom: 1px dashed;
	cursor: pointer;
}

.hasTitle:HOVER {
	color: blue;
	border-color: blue;
}

.customTooltip {
	background-color: white;
	border-width: 2px;
	border-color: gray;
	padding: 0px;
}

.customTooltip-text {
	width: 350px;
	height: 80px;
	cursor: arrow;
	border-width: 2px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.svginside {
	width: 100%;
	height: auto;
	display: inline-block;
}

.svginside svg {
	width: 100%;
	height: auto;
	max-width: 100%;
}

.svginside-cfv {
	height: 40px;
}

.svg-signature {
	width: 90px;
}

.payment-template-deactivation {
	background-color: #f1948a;
}

.payment-template-activation {
	background-color: #abebc6;
}

.sameContact {
	background-color: #e0ffe1;
}

.childContact {
	background-color: #f5dfdf;
}

.parentContact {
	background-color: #f5f5c6;
}

.deactivated {
	background-color: #f5f5c6;
}

.selected {
	background-color: var(--selected-bg);
}

.edited {
	background-color: rgba(228, 234, 33, 0.39);
}

.existing {
	background-color: rgba(0, 0, 0, 0.11);
}

.subSelected {
	font-style: italic;
	background-color: var(--selected-bg);
}

.deletedItem {
	background-color: #EFF6FF;
	font-style: italic;
}

.subActivity {
	background-color: #f2f0ef;
}

.subActivityIndent {
	padding-left: 15px;
}

.secActivity {
	background-color: #EDEDED;
	font-style: italic;
}

.prodItem {
	background-color: #fdfaf7;
}

.pnl-no-padding {
	padding: 0px;
}

.pnl-2-padding {
	padding: 4px;
}

.pnl-no-margin {
	margin: 0px;
}

.pnl-no-border {
	border-width: 0px;
	border-style: none;
}

.pnl-disabled {
	color: #666666;
	background-color: #ECECEC;
}

.pnl-open {
	background-color: #EFFFAF;
}

.pnl-done {
}

.header-in-panel {
	font-size: 1.2em;
	font-weight: bold;
}

.embeddedPanelHeader {
	color: #000000;
	background: #ecf4fe repeat scroll 0 0;
}

.simplePanelHeader {
	color: #000000;
	background: #f5f8fc repeat scroll 0 0;
	font-size: 1.0em;
	font-weight: normal;
	height: 11px;
}

/* Abschnitts-Ueberschrift im Bewerber:innen-Tile: hoeher als simplePanelHeader,
   mehr vertikaler Innenabstand. */
.ad-section {
	height: auto;
	padding: 8px 8px;
	margin: 10px 0 6px 0;
	font-weight: 600;
	background: #F8F9F7;
}

.annotation {
	background-color: #f2f0ef;
	height: 1.3em;
	padding: 5px;
	vertical-align: middle;
	font-style: italic;
	margin-bottom: 7px;
}

.headerRow {
	color: #000;
	background-color: #f2f0ef;
}

#shortHeader {
	margin-left: 7px;
}

#shortHeader a {
	color: #666666;
	font-size: 1.1em;
	text-decoration: none;
}

.shortHeaderLabel1 {
	font-size: 1.1em;
	font-weight: bold;
	text-align: right;
}

.shortHeaderLabel2 {
	font-size: 1.1em;
	padding-left: 10px;
	font-weight: bold;
	text-align: right;
}

.shortHeaderField {
	font-size: 1.1em;
	padding-left: 10px;
}

.header-in-week-panel {
	font-size: 1.0em;
	font-weight: normal;
	padding: 2.5px;
}

.dropDownMenu {
	margin: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #A09F9E;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
}

.vertical-menu-cell {
	padding: 0px 4px 0px 4px;
}

.checkBoxTbl {
	font-weight: bold;
	text-align: center;
	padding: 4px 4px 0px 0px;
}

.spinnerGif {
	width: 50px;
}

.tableCostSplitHeader {
	font-weight: bold;
	height: 2em;
	vertical-align: bottom;
}

.tableCostSplitFooter {
	font-weight: bold;
	text-align: right;
}

.customFieldColumn {
	width: 50%;
}

.activityDescription {
	font-weight: bold;
}

.professionalService {
	color: gray;
}

.serviceFacility {
	color: gray;
}

.labelCustomer {
	font-style: italic;
}

.labelProduct {
	font-style: italic;
}

.labelRoute {
	font-style: italic;
}

.labelCost {
	font-style: italic;
}

.labelFlag {
	font-style: italic;
}

.labelSecondaryActivity {
	font-style: italic;
}

.weekColumn {
	width: 150px;
	vertical-align: top;
	padding: 0px;
}

.weekColumn .header {
	background-color: #EFF6FF;
	padding: 2px;
	min-height: 17px;
}

.weekColumn .date {
	font-weight: bold;
}

.weekColumn .dapHeader {
	background-color: #E0E0E0;
	margin-top: 4px;
	padding: 2px;
}

.weekColumn .time {
	font-weight: bold;
	padding: 2px;
	border-top-color: black;
	border-top-style: dotted;
	border-top-width: 1px;
	margin-top: 2px;
}

.weekColumn .customer {
	margin-left: 4px;
}

.weekColumn .actDesc {
	margin-left: 4px;
}

.weekColumn .comment {
	font-style: italic;
	margin-left: 4px;
}

.weekColumn .even {
	background-color: #EFEFEF;
	padding: 2px;
}

.weekColumn .odd {
	background-color: #FFFFFF;
	padding: 2px;
}

.timeType {
	width: 110px;
}

.timeHour {
	min-width: 40px;
}

.timeMinute {
	min-width: 50px;
}

.dayLabel {
	width: 60px;
}

.dayValue {
	width: 144px;
}

.dayFieldPadding {
	padding-right: 10px;
}

.plsWait {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 16px 12px;
}

.plsWait-text {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark, #333);
	text-align: center;
}

.star-loader-wrap {
	display: flex;
	justify-content: center;
	margin: 16px 0 8px;
}

.star-loader {
	width: 64px;
	height: 64px;
	display: block;
	transform-origin: center;
	animation: star-spin 4s linear infinite, star-pulse 1.4s ease-in-out infinite alternate;
}

.star-loader-lg {
	width: 110px;
	height: 110px;
}

.star-loader-sm {
	width: 20px;
	height: 20px;
}

@keyframes star-spin {
	to { transform: rotate(360deg); }
}

@keyframes star-pulse {
	from { opacity: 0.45; }
	to   { opacity: 1; }
}

/* Login-Seite: Vollbild-Layout mit zentrierter Box */
body.login-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 20px;
	background: linear-gradient(135deg, var(--sidebar-bg) 0%, #2a3544 50%, #354253 100%);
	position: relative;
}

body.login-page #content {
	/* Reset globale #content Styles */
	height: auto;
	background: none;
	padding: 0;
	border-radius: 0;
	overflow: visible;

	/* Login-spezifisches Layout */
	min-height: auto;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 450px;
	/* Leichter negativer Margin, um Form optisch besser zu zentrieren (Logo wird mit eingerechnet) */
	margin: -80px 0 0 0;
}

body.login-page #headerContent {
	display: none;
}

/* Logo und Schriftzug */
.login-logo {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	margin-bottom: 0;
}

.login-logo img {
	width: 48px;
	height: 48px;
}

.login-logo-text {
	font-family: var(--font-family-heading);
	font-size: 36px;
	font-weight: 300;
	color: white;
	letter-spacing: 0.5px;
}

/* Größere vertikale Abstände für Login-Formular */
body.login-page .rowForm {
	height: 2.4em;
}

/* Toast-Stil für Systemnachrichten (systemweit verwendbar) */
#systemMessage.active,
.system-toast {
	background-color: var(--primary-yellow);
	color: var(--text-dark);
	padding: 6px 20px;
	font-weight: 500;
	font-size: 12px;
	text-align: center;
}

body.login-page #systemMessage {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	border-radius: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 1000;
}

body.login-page .rich-panel {
	background-color: white;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
	border: none;
	border-radius: var(--border-radius-medium);
	width: 100%;
}

body.login-page #browserMessage {
	max-width: 450px;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 15px;
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-medium);
}

body.login-page #softwareVersion {
	position: fixed;
	bottom: 10px;
	right: 15px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
}

.actionCol60 {
	width: 60px;
}

.dataTable {
}

.info {
	font-weight: bold;
}

.error {
	color: red;
	font-weight: normal;
}

#ticketContent p {
	padding-top: 1px;
	padding-bottom: 1px;
}

#ticketContent table {
	border: 1px solid black;
	border-collapse: collapse;
}

#ticketContent td {
	border: 1px solid black;
	padding: 3px;
}

#ticketContentTable table {
	border: 1px solid black;
	border-collapse: collapse;
}

#ticketContentTable td {
	border: 1px solid black;
	padding: 3px;
}

.ticket-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
}

.ticket-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.ticket-content-panel .rich-panel-body div h1 {
	font-size: 1.5em;
	margin-bottom: 15px;
	border-bottom: 1px solid #ecf0f1;
	padding-bottom: 8px;
}

.ticket-content-panel .rich-panel-body div h2 {
	font-size: 1.2em;
	margin: 12px 0;
}

.ticket-content-panel .rich-panel-body div p {
	margin: 12px 0;
	line-height: 1.1;
}

.ticket-content-panel .rich-panel-body div ul {
	margin: 15px 0;
	padding-left: 20px;
}

.ticket-content-panel .rich-panel-body div li {
	margin-bottom: 8px;
	line-height: 1.4;
	list-style-type: disc;
	padding-left: 5px;
}

.ticket-content-panel .rich-panel-body div li li {
	list-style-type: circle;
}


/* === 8. MELDUNGSBOXEN (Toast-Stil) === */

/* Info/Success Meldungen - Grün */
.msgInfo {
	background-color: var(--msg-info-bg);
	color: var(--msg-info-text);
	border-left: 4px solid var(--msg-info-border);
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
	list-style-type: none;
	margin-bottom: 12px;
	padding: 12px 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
}

/* Warnung Meldungen - Gelb/Orange */
.msgWarn {
	background-color: var(--msg-warn-bg);
	color: var(--msg-warn-text);
	border-left: 4px solid var(--msg-warn-border);
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
	list-style-type: none;
	margin-bottom: 12px;
	padding: 12px 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
}

/* Fehler Meldungen - Rot */
.msgError {
	background-color: var(--msg-error-bg);
	color: var(--msg-error-text);
	border-left: 4px solid var(--msg-error-border);
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
	list-style-type: none;
	margin-bottom: 12px;
	padding: 12px 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
}

/* Fatale Fehler - Dunkelrot */
.msgFatal {
	background-color: var(--msg-fatal-bg);
	color: var(--msg-fatal-text);
	border-left: 4px solid var(--msg-fatal-border);
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-medium);
	list-style-type: none;
	margin-bottom: 12px;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
}

.msg-warn {
	font-weight: bold;
	color: #000000;
	background-color: var(--warning-light-bg);
	border-style: solid;
	border-width: 2px;
	border-color: var(--warning-light-border);
	list-style-type: none;
	margin-bottom: 10px;
	padding: 3px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 10px);
	margin-right: 10px !important;
}

.msg-warn-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


/* === 9. ICON-SYSTEM === */

.title-icon {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;
	flex-wrap: nowrap;
	white-space: nowrap;
	padding-right: 10px;
}

.title-icon-text {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: var(--text-dark);
	min-width: 0;
}

.rich-title-icon {
	position: absolute;
	top: 0;
	right: 5px;
	height: 32px;
	display: flex;
	align-items: center;
	gap: 0px;
	flex-shrink: 0;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: transparent;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.1s;
	text-decoration: none !important;
	color: inherit !important;
	position: static !important;
}

.icon-button i {
	font-size: 20px;
	transition: color 0.3s;
}

.icon-button:hover {
	background-color: var(--bg-hover);
}

.icon-button:active {
	transform: scale(0.98);
	background-color: var(--bg-active);
}

.icon-button:focus {
	outline: none;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.icon-button::after {
	content: none !important;
}

.icon-button.inverted:hover,
.icon-button.inverted:active {
	color: var(--text-dark) !important;
}

.icon-button.inverted:hover i,
.icon-button.inverted:active i {
	color: var(--text-dark) !important;
}

.icon-button.small {
	width: 28px;
	height: 28px;
}

.icon-button.small i {
	font-size: 16px;
}

.icon-button.tiny {
	width: 22px;
	height: 22px;
}

.icon-button.tiny i {
	font-size: 16px;
}

.icon-button.micro {
	width: 16px;
	height: 16px;
}

.icon-button.micro i {
	font-size: 12px;
}

.icon-button.new i {
	color: var(--success-text);
}

.icon-button.delete i {
	color: #D11E22;
}

.icon-button.edit i {
	color: var(--primary-blue);
}

.icon-button.warning i {
	color: #fbc02d;
}

.icon-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.icon-image i {
	font-size: 24px;
}

.icon-image.small i {
	font-size: 16px;
}

.icon-image.tiny i {
	font-size: 12px;
}

.color-error {
	color: var(--error-text);
}

.color-warning {
	color: #fbc02d;
}

.color-success {
	color: var(--success-text);
}

.color-primary {
	color: var(--primary-yellow);
}


/* === 10. LINKS === */

a {
	text-decoration: none;
	color: var(--primary-blue);
	font-weight: bold;
	position: relative;
	transition: color 0.3s ease;
	line-height: 1.6;
}

a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background-color: var(--primary-blue);
	transition: transform 0.3s ease;
	transform: scaleX(0);
	transform-origin: right;
}

a:hover {
	color: #1E3391;
}

a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sidebar-Navigation-Links: Kein Unterstrich-Effekt (allgemeine Link-Styling deaktivieren) */
.sidebar .nav-link::after {
	display: none;
}

/* Breadcrumb-Tabs: Kein Unterstrich-Effekt (allgemeine Link-Styling deaktivieren) */
.breadcrumb-tab::after,
.breadcrumb-tab a::after {
	display: none;
}

/* TinyMCE-Toolbar-Buttons: Kein Unterstrich-Effekt */
.mceButton::after {
	display: none;
}

/* Links mit Button-Optik (z. B. a4j:commandLink mit .rich-button):
   globale Link-Animation (Unterlinie + Blaufaerbung) deaktivieren */
a.rich-button::after {
	display: none;
}
a.rich-button:hover {
	color: var(--text-medium);
}


/* === 11. RICHFACES-OVERRIDES === */

.rich-panel {
	padding: 0px;
	margin-bottom: 5px;
	border-radius: var(--border-radius-medium);
	border: 0px solid var(--border-medium);
	box-shadow: var(--shadow-small);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rich-panel-header {
	background: none;
	background-color: #F8F9F750;
	border: none;
	padding: 10px;
	border-bottom: 1px solid var(--border-light);
}

.rich-panel-body {
	background: none;
	min-height: 30px;
}

.rich-panel-body.pnl-open {
	background-color: #c8e9ca;
}

.rich-panel-body.pnl-disabled {
	background-color: var(--bg-medium);
	color: var(--text-light);
}

.rich-panel-body.pnl-done {
}

/* === Floating Actionbar (styleClass="floating-actionbar") === */

.floating-actionbar-wrapper {
	max-width: var(--max-content-width);
	margin: 0;
	width: 100%;
}
.floating-actionbar-wrapper:not(:has(.actionbar-item)) {
	display: none;
}

.floating-actionbar {
	display: flex;
	align-items: center;
	background: var(--bg-lighter);
	border-radius: var(--border-radius-large);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--border-light);
	padding: 7px;
	gap: 2px;
	width: fit-content;
	/* min-width: min(320px, 100%); */
	max-width: var(--max-content-width);
	margin: 0 auto 16px auto;
	overflow: hidden;
	flex-wrap: nowrap;
	position: relative;
}

.floating-actionbar .actionbar-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: var(--border-radius-medium);
	color: var(--text-medium);
	text-decoration: none;
	font-size: var(--font-size-breadcrumb);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.floating-actionbar .actionbar-item::after {
	display: none;
}

.floating-actionbar .actionbar-item i {
	font-size: 16px;
}

.floating-actionbar .actionbar-item:hover {
	background-color: var(--bg-hover);
	color: var(--primary-blue);
}

.floating-actionbar .actionbar-item.primary {
	background-color: var(--primary-yellow);
	color: var(--text-dark);
	font-weight: 600;
}

.floating-actionbar .actionbar-item.primary:hover {
	background-color: var(--warning-border);
	color: var(--text-dark);
}

.floating-actionbar .actionbar-divider {
	width: 1px;
	height: 22px;
	background: var(--border-light);
	margin: 0 3px;
	flex-shrink: 0;
	display: block;
}

/* Styling wie .actionbar-item, nur Icon ohne Text */
.actionbar-overflow-btn {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: var(--border-radius-medium);
	color: var(--text-medium);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
	user-select: none;
}

.actionbar-overflow-btn i {
	font-size: 20px;
}

.actionbar-overflow-btn:hover {
	background-color: var(--bg-hover);
	color: var(--primary-blue);
}

/* Dropdown-Menü analog zu options-panel */
.actionbar-overflow-menu {
	display: none;
	position: fixed;
	background: var(--bg-lighter);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	border: 1px solid var(--border-light);
	padding: 4px 0;
	z-index: 9999;
	flex-direction: column;
	min-width: 220px;
	overflow: hidden;
}

.actionbar-overflow-menu.open {
	display: flex;
}

.actionbar-overflow-menu .actionbar-item {
	display: flex !important;
	align-items: center;
	gap: 10px !important;
	padding: 9px 16px 9px 14px !important;
	border-radius: 0 !important;
	color: var(--text-medium) !important;
	border-left: 2px solid transparent;
	transition: background-color 0.13s ease, color 0.13s ease, border-left-color 0.13s ease;
}

.actionbar-overflow-menu .actionbar-item i {
	font-size: 16px;
	flex-shrink: 0;
}

.actionbar-overflow-menu .actionbar-item:hover {
	background-color: var(--bg-hover);
	border-left-color: var(--primary-blue);
	color: var(--primary-blue) !important;
}
.actionbar-overflow-menu .actionbar-item::after,
.actionbar-overflow-menu .actionbar-item:hover::after {
	display: none;
}

.actionbar-overflow-menu .actionbar-divider {
	display: none;
}

/* === Optionen-Panel auf Suchseiten (styleClass="options-panel") === */

.rich-panel.options-panel {
	border: 1px solid var(--border-light);
	box-shadow: none;
	min-width: 180px;
	max-width: 240px;
	margin-bottom: 0;
	overflow: hidden;
}

.rich-panel.options-panel .rich-panel-header {
	padding: 10px 14px 9px 14px;
	background: var(--bg-highlight);
	border-bottom: 1px solid var(--border-light);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-lighter);
}

.rich-panel.options-panel .rich-panel-body {
	padding: 4px 0;
	min-height: 0;
}

.rich-panel.options-panel .rich-panel-body a {
	display: block;
	padding: 7px 16px 7px 13px;
	color: var(--text-medium);
	text-decoration: none;
	font-size: var(--font-size-base);
	border-left: 2px solid transparent;
	transition: background-color 0.13s ease, color 0.13s ease, border-left-color 0.13s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rich-panel.options-panel .rich-panel-body a:hover {
	background-color: var(--bg-hover);
	border-left-color: var(--primary-blue);
	color: var(--primary-blue);
	text-decoration: none;
}

.rich-panel.options-panel .rich-panel-body a::after {
	display: none;
}

/* Leere <div>-Trennelemente zwischen den Links ausblenden */
.rich-panel.options-panel .rich-panel-body > div:empty {
	display: none;
}

/* Hover-Effekt für die Card */
.card:hover {
	transform: translateY(-4px);  /* Verschiebt die Card nach oben */
	box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2);
}

.rich-table {
	border: 1px solid var(--border-medium);
	box-shadow: var(--shadow-small);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--border-radius-medium);
	overflow: hidden;
}

.rich-table-header {
	background-image: none;
	background-color: var(--bg-highlight);
}

.rich-table-headercell {
	padding: 10px 5px 10px 10px;
	font-weight: bold;
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
	text-align: left;
}

/* Spaltenausrichtung: headerClass="center|centered|left|right" bzw. styleClass="center|centered|left|right" */
.rich-table-headercell.center, .rich-table-headercell.centered,
.rich-table-subheadercell.center, .rich-table-subheadercell.centered,
.rich-table-cell.center, .rich-table-cell.centered { text-align: center; }
.rich-table-headercell.right,  .rich-table-subheadercell.right,  .rich-table-cell.right  { text-align: right; }
.rich-table-headercell.left,   .rich-table-subheadercell.left,   .rich-table-cell.left   { text-align: left; }

/* rich:editor auf volle Breite des Containers */
.editor-full-width table.mceLayout { width: 100% !important; }

.rich-table-subheadercell {
	padding: 10px !important;
	font-weight: 600;
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
	text-align: left;
}

.rich-table-cell {
	padding: 10px 5px;
	font-weight: normal;
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.rich-table-cell.condensed {
	padding: 5px 3px;
}

.rich-table-thead {
	background: none;
}

.rich-table-subheader {
	background-color: var(--bg-highlight);
}

.rich-table-header-continue {
	background-image: none;
	background-color: var(--border-medium);
	
	/* #DEDEDE --bg-medium: #eeeeee;
  --bg-lighter: #FFFFFF;
  --bg-highlight: #F8F9F7;*/
}

.rich-table-subfooter {
	background-color: var(--bg-highlight);
}

.rich-table-subfootercell {
	padding: 5px 5px;
	font-weight: normal;
	border-right: none;
	border-bottom: solid 1px var(--border-medium);
}

.rich-tab-active {
	display: block;
	float: left;
	height: 15px;
	margin-left: 1px;
	padding: 7px 7px;
	background-image: none;
	border-color: var(--border-medium);
	border-width: 1px;
	border-style: solid;
	border-bottom-width: 0;
	cursor: default;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-family-base);
	font-size: 14px;
	font-weight: 500;
	border-radius: 5px 5px 0 0;
	box-shadow: var(--shadow-medium);
	transition: var(--transition-standard);
	position: relative;
	z-index: 1;
	color: var(--primary-blue);
	background: none;
	border-bottom: 2px solid var(--primary-yellow);
	background-color: #EFEFEF;
}

.rich-tab-inactive {
	display: block;
	float: left;
	height: 15px;
	margin-left: 1px;
	padding: 7px 7px;
	background-image: none;
	border-color: var(--border-medium);
	border-width: 1px;
	border-style: solid;
	border-bottom-width: 0;
	cursor: default;
	background: linear-gradient(to bottom, var(--bg-light), #f0f0f0);
	text-decoration: none;
	text-align: center;
	font-family: var(--font-family-base);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-medium);
	border-radius: 5px 5px 0 0;
	box-shadow: var(--shadow-medium);
	transition: var(--transition-standard);
	position: relative;
	z-index: 2;
	background-position: 0px;
}

.rich-tab-inactive:hover {
	background: none;
	background-color: var(--secondary-blue);
	color: var(--primary-blue);
	border-radius: 5px 5px 0 0;
}

.rich-tabhdr-side-border {
	background-color: transparent;
	background-image: none;
}

.rich-tabhdr-side-cell {
	border: none;
}

.rich-mpnl-content {
	border-radius: 5px;
	box-shadow: var(--shadow-large);
}

.rich-mpnl-header-cell {
	height: 20px;
	width: 100%;
	vertical-align: middle;
	z-index: 5;
}

.rich-mpnl-header {
	background-color: var(--bg-highlight);
	color: var(--text-light);
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-color: #9CABC1;
	filter: alpha(opacity=100);
	opacity: 1;
	background-image: none;
	padding: 8px;
	border-width: 1px;
	border-style: none;
	background-position: top left;
	background: none;
	background-repeat: repeat-x;
	border-bottom: 1px solid var(--border-light);
	margin-bottom: 10px;
}

.rich-mpnl-shadow {
	display: none !important;
	background-color: transparent;
}

.rich-mpnl-body {
	background-image: none;
}

.rich-menu-list-border {
	background: linear-gradient(to bottom, var(--bg-light), #f0f0f0);
	border-radius: 0 5px 5px 5px;
	border: 0px solid;
	float: left;
	position: absolute;
	opacity: 1;
	box-shadow: var(--shadow-medium);
}

.rich-menu-list-bg {
	background-image: none !important;
	border-radius: 5px;
	border: 0px solid;
}

.rich-menu-item, .rich-menu-item a, .rich-menu-item a:hover, .rich-menu-item a:visited,
.rich-menu-group, .rich-menu-group a, .rich-menu-group a:hover, .rich-menu-group a:visited {
	color: var(--text-medium);
	font-family: Arial,Verdana,sans-serif;
	font-size: 11px;
	transition: var(--transition-standard);
}

.rich-menu-item:hover {
	background: none;
	background-color: var(--secondary-blue);
	color: var(--primary-blue);
	border: none;
	padding: 2px 36px 2px 2px;
}

.rich-messages {
	margin: 0;
}

.rich-messages-marker {
}

.rich-messages-label {
}

.datalist {
	list-style: none;
}

.rich-message {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: transparent;
	border: none;
	padding: 0;
	color: var(--error-text);
	font-weight: normal;
}

.rich-message.error {
	background-color: var(--msg-error-bg);
	color: var(--msg-error-text);
	border-left: 3px solid var(--msg-error-border);
	padding: 6px 10px;
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
}

.rich-message.fatal {
	background-color: var(--msg-fatal-bg);
	color: var(--msg-fatal-text);
	border-left: 3px solid var(--msg-fatal-border);
	padding: 6px 10px;
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
}

.rich-message.warn {
	background-color: var(--msg-warn-bg);
	color: var(--msg-warn-text);
	border-left: 3px solid var(--msg-warn-border);
	padding: 6px 10px;
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
}

.rich-message.info {
	background-color: var(--msg-info-bg);
	color: var(--msg-info-text);
	border-left: 3px solid var(--msg-info-border);
	padding: 6px 10px;
	border-radius: var(--border-radius-small);
	box-shadow: var(--shadow-small);
}

.rich-message-marker {
	font-size: 14px;
	color: var(--error-text);
	display: flex;
	align-items: center;
	margin-left: 2px;
	margin-right: 0px;
}

.rich-message-label {
	color: var(--error-text);
	font-weight: normal;
	text-decoration: underline;
}

.rich-separator {
	background-image: none !important;
	background-color: #cdcbc8;
	height: 1px !important;
}

/* rich:editor / TinyMCE 3 – Modernes Styling */

/* Äußerer Rahmen */
.mceLayout {
	border-color: var(--border-light) !important;
}
.richfacesSkin .mceIframeContainer {
	border-top-color: var(--border-light) !important;
}
.richfacesSkin table.mceLayout tr.mceLast td {
	border-bottom-color: var(--border-light) !important;
}
.richfacesSkin table.mceLayout tr.mceFirst td {
	border-top-color: var(--border-light) !important;
}

/* Toolbar-Hintergrund */
.mceToolbar {
	background: var(--bg-light) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--border-light) !important;
	padding: 2px 4px !important;
}

/* Button – Normalzustand */
.mceButton {
	display: inline-block !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: var(--border-radius-small) !important;
	padding: 2px 3px !important;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Button – Hover (CSS-Pseudo + JS-Klasse) */
.mceButton:hover,
.mceButtonOver,
.mceButton.mceButtonOver {
	background: var(--bg-hover) !important;
	background-image: none !important;
	border-color: var(--border-light) !important;
	text-decoration: none !important;
}

/* Button – Aktiv / getoggelt (z.B. Fett aktiv) */
.mceButtonActive {
	background: var(--bg-active) !important;
	background-image: none !important;
	border-color: var(--border-medium) !important;
}

/* Button – Deaktiviert */
.mceButtonDisabled {
	opacity: 0.35 !important;
	cursor: default !important;
}

/* Trennlinie zwischen Button-Gruppen */
.mceSeparator {
	background-color: var(--border-light) !important;
	background-image: none !important;
	border: none !important;
	width: 1px !important;
	margin: 2px 3px !important;
}

/* Dropdown (Schriftgröße, Format) */
.mceSelectBox {
	font-family: var(--font-family-base) !important;
	font-size: var(--font-size-base) !important;
	color: var(--text-medium) !important;
	background-color: var(--bg-lighter) !important;
	border: 1px solid var(--border-light) !important;
	border-radius: var(--border-radius-small) !important;
}

.hoverable-row:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	background-color: #f5f8ff;
	position: relative;
	z-index: 1;
	transition: box-shadow 0.15s ease;
}


/* === 12. FORMULARHILFEN === */

.req-label::after {
	content: " *";
	color: var(--error-text);
	font-weight: bold;
}

.cfValue-container {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.cfValue {
	color: black;
	text-decoration: none;
	border-color: black;
	border-bottom: 1px dashed;
}

.cfDeleted {
	text-decoration: line-through;
}

.cfValue a:hover {
	color: red;
}

.cfExtLink {
	margin-left: 5px;
}

.cfPadding {
	padding-top: 3px;
	padding-bottom: 3px;
}

.cfeditrow {
	padding: 0px;
	vertical-align: middle;
	border: none !important;
	box-shadow: none !important;
}

.noborder {
	box-shadow: none !important;
	border: none;
}

/* ============================================================
   Suchbereich-Flyout (Sidebar-Erweiterung)
   ============================================================ */
.sidebar-flyout {
    position: fixed;
    top: 0;
    left: -280px;
    height: 100vh;
    width: 240px;
    background-color: #ffffff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.10);
    z-index: 99;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Backdrop für Flyouts */
.sidebar-flyout-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 98; /* Unter Flyout (99), über Sidebar (100) */
    display: none;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Nicht klickbar wenn geschlossen */
}

.sidebar-flyout-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto; /* Klickbar wenn offen */
}

.sidebar-flyout-header {
    padding: 18px 20px 14px;
    font-family: var(--font-family-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.sidebar-flyout-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
    max-height: calc(100vh - 120px);
    scroll-behavior: smooth;
}

/* Scrollbar-Styling für bessere UX */
.sidebar-flyout-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-flyout-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-flyout-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.sidebar-flyout-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.sidebar-flyout-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-medium);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-flyout-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-dark);
    text-decoration: none;
}

.sidebar-flyout-item.active {
    background-color: #e8eaf6;
    color: var(--primary-blue);
    font-weight: 600;
}

.sidebar-flyout-item::after,
.sidebar-flyout-item:hover::after {
    display: none;
}

/* Gruppen-Header im Flyout (z.B. für Ticket-Kategorien) */
.sidebar-flyout-group-header {
    padding: 12px 20px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-lighter);
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
}

.sidebar-flyout-group-header:first-child {
    border-top: none;
    padding-top: 8px;
    margin-top: 0;
}

/* === SIDEBAR THEME: LIGHT MODE === */
:root.sidebar-theme-light {
    --sidebar-bg: #F9F9F8;           /* Heller Hintergrund wie gewünscht */
    --sidebar-text: #313D46;         /* Dunkler Text (Medium Grey) */
    --sidebar-text-active: #1F1F1F;  /* Sehr dunkler Text für aktive Items */
    --sidebar-active-bg: #E5E9F6;    /* Heller Blau-Ton für aktive Items */
    --sidebar-hover-bg: #EEEEEE;     /* Grauer Hover-Effekt */
    --sidebar-border: #E2E3E1;       /* Helle Grenzlinie */

    /* Content-Bereich wird reines Weiß im Light Mode */
    --bg-light: #FFFFFF;
}

/* Toggle-Button Styling für Light Mode */
.sidebar-theme-light .sidebar-toggle {
    color: var(--sidebar-text);
}

.sidebar-theme-light .sidebar-logo-text {
    color: var(--sidebar-text-active);
}

/* Deaktivierte Menüpunkte im Light Mode - bessere Sichtbarkeit */
.sidebar-theme-light .sidebar-nav li.inactive a,
.sidebar-theme-light .sidebar-nav li.inactive .nav-link {
    color: rgba(49, 61, 70, 0.4);  /* Dunkler Text mit 40% Opacity für Light Mode */
}

/* Version im Light Mode - bessere Sichtbarkeit */
.sidebar-theme-light .sidebar-version {
    color: rgba(49, 61, 70, 0.5);  /* Dunkler Text mit 50% Opacity für Light Mode */
}

/* Deaktiviere Transitions im Light Mode um "Flash" bei Menüpunkt-Aktivierung zu vermeiden */
.sidebar-theme-light .sidebar-nav li a,
.sidebar-theme-light .sidebar-nav li .nav-link {
    transition: none !important;
}

/* Theme Toggle Icon in Sidebar Footer */
.sidebar-theme-toggle {
    padding: 0px;
    background-color: var(--sidebar-bg);
}

.sidebar-theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* Linksbündig wie Menüpunkte */
    width: 100%;
    padding: 0px 14px 10px 14px;  /* Gleicher Padding wie Menüpunkte */
    color: var(--sidebar-text);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-theme-toggle-icon:hover {
    color: var(--sidebar-text-active);
}

.sidebar-theme-toggle-icon i {
    font-size: var(--sidebar-icon-size);  /* Gleiche Icon-Größe wie Menüpunkte */
    width: 20px;
    text-align: center;
}

/* === BARRIEREFREIHEIT: Reduced Motion === */

/* Respektiere Nutzer-Präferenz für reduzierte Animationen */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-logo-text,
    .sidebar-toggle,
    .sidebar-nav li a,
    .sidebar-nav li .nav-link,
    .sidebar-user,
    .sidebar-user-link,
    .sidebar-user-name,
    .sidebar-version,
    .sidebar-theme-toggle-icon,
    #main-wrapper,
    #page-content,
    #headerContent,
    #content {
        transition: none !important;
    }
}

/* ========================================
   Menü-Favoriten System
   ======================================== */

/* Favoriten-Icons im Hauptmenü */
.favorite-icon {
    color: var(--brand-orange, #FF6B35);
}

/* Flyout-Item mit Favoriten-Icon */
.sidebar-flyout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.sidebar-flyout-item-label {
    flex: 1;
}

/* Favoriten-Toggle Icon */
.favorite-toggle {
    cursor: pointer;
    color: var(--sidebar-text-muted, #6B7280);
    transition: color 0.2s ease, transform 0.2s ease;
    font-size: 18px;
    line-height: 1;
}

.favorite-toggle:hover {
    color: var(--brand-orange, #FF6B35);
    transform: scale(1.15);
}

/* Selektierter Favorit (ph-fill ph-star) */
.favorite-toggle.ph-fill {
    color: var(--brand-orange, #FF6B35);
}

/* CARITAS-DMS: responsives Card-Layout fuer das Dokumenten-Dashboard */
.doc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: stretch;   /* alle Karten einer Zeile gleich hoch */
}

.doc-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    background: #fff;
    padding: 10px 12px;
    box-shadow: var(--shadow-small);
    transition: box-shadow .15s, transform .15s;
}

.doc-card:hover {
    box-shadow: 0 4px 7px rgba(0, 0, 0, .12);
}

/* fehlendes Pflichtdokument: nur roter Akzentstreifen, Karte bleibt weiss */
.doc-card--missing {
    border-left-color: var(--msg-error-border, #ef4444);
}

.doc-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.doc-card__title {
    font-weight: 600;
    color: var(--text-dark);
}

/* Status-Banner ueber die gesamte Kartenbreite, unten verankert (Footer-Banner) */
.doc-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: auto -12px -10px -12px;
    padding: 8px 12px;
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    font-weight: 600;
}

.doc-status--missing {
    background: var(--msg-error-bg, #fecaca);
    color: var(--msg-error-text, #7f1d1d);
}

.doc-status--missing i {
    color: var(--msg-error-border, #ef4444);
}

.doc-empty {
    color: var(--text-lighter);
    font-style: italic;
}

.doc-file {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--border-light);
}

.doc-file:first-of-type {
    border-top: none;
}

.doc-file__icon {
    color: var(--text-lighter);
    margin-top: 2px;
}

.doc-file__body {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.doc-file__action {
    flex: 0 0 auto;
}

/* Mehr/Weniger-Umschalter fuer Karten mit vielen Dokumenten (client-seitig) */
.doc-card.doc-collapsed .doc-file--extra {
    display: none;
}

.doc-more-wrap {
    border-top: 1px solid var(--border-light);
    padding-top: 6px;
    margin-top: 2px;
}

.doc-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--primary-blue, #2843B5);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

/* globale animierte Unterlinie (a::after) an dieser Stelle deaktivieren */
.doc-more::after {
    display: none;
}

.doc-more:hover {
    background-color: var(--bg-hover, #eef1fb);
    color: #1E3391;
    text-decoration: none;
}

.doc-card.doc-collapsed .doc-more__hide {
    display: none;
}

.doc-card:not(.doc-collapsed) .doc-more__show {
    display: none;
}

/* dezenter Hinweistext (z.B. in Dialogen) */
.hint {
    color: var(--text-muted, #6b7280);
    font-style: italic;
    font-size: 0.9em;
}

/* Zusatz zu .hint fuer Feldhinweise in Formularrastern: eigener Block unter
   dem Eingabefeld statt Fliesstext daneben. Inline gesetzt beginnt die zweite
   Zeile am linken Zellenrand und damit weiter links als die erste - das sieht
   nach Fehler aus. Als Block sitzt der Hinweis linksbuendig zum Feld, weil
   beide am selben Zellenrand beginnen. Verwendung: styleClass="hint hint-block". */
.hint-block {
    display: block;
    margin-top: 2px;
}

/* Formularzeile mit Feld + hint-block (z.B. Dropdown mit Hinweistext darunter):
   Die Zellen einer panelGrid-Zeile sind standardmaessig vertikal zentriert -
   das Label schwebt dann auf halber Hoehe von Feld + Hinweis. Diese Utility
   richtet alle Zellen der Zeile oben aus und gibt dem Hinweistext mehr Breite
   (ca. doppelte Feldbreite), damit er flach auf wenigen Zeilen laeuft.
   Verwendung: styleClass="field-with-hint" auf der h:panelGroup, die Feld und
   Hinweis umschliesst. Wirkt nur auf die eigene Tabellenzeile. */
tr:has(> td > .field-with-hint) > td {
    vertical-align: top;
}

.field-with-hint .hint-block {
    max-width: 40em;
}

/* CARITAS-DMS: Split-Button "Dokument hinzufuegen" + "Mehrere Dateien hochladen" */
.content-add-split {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.content-add-split__caret {
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    margin-left: 2px;
    color: var(--primary-blue);
    cursor: pointer;
    border-left: 1px solid var(--border-light);
}

.content-add-split__caret:hover {
    color: #1E3391;
}

/* globale animierte a-Unterlinie an Primaer-Button/Caret/Menue-Eintrag deaktivieren */
.content-add-split__primary-btn::after,
.content-add-split__caret::after,
.content-add-split__item::after {
    display: none;
}

.content-add-split__menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    min-width: 210px;
    margin-top: 6px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.content-add-split.open .content-add-split__menu {
    display: block;
}

.content-add-split__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--border-radius-small);
    color: var(--text-dark);
    font-weight: 600;
    white-space: nowrap;
}

.content-add-split__item:hover {
    background: var(--bg-hover);
    color: #1E3391;
}

/* groesseres Datei-Icon im Menue-Eintrag */
.content-add-split__item i {
    font-size: 18px;
}

/* Wrapper um Primaerteil und Caret */
.content-add-split__control {
    display: inline-flex;
    align-items: center;
}

/* Beschrifteter Split-Button (nur bei multiFileUpload): umrandet, kompakt/niedrig */
.content-add-split--labeled .content-add-split__control {
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    overflow: hidden;            /* saubere runde Ecken / Hover-Segmente */
    background: #fff;
}

/* linker (primaerer) Teil: Icon + Beschriftung */
.content-add-split__primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;           /* etwas hoeher (Titelleiste bietet Platz) */
    line-height: 1;              /* globale a-line-height:1.6 ueberschreiben */
    color: var(--text-dark);
    font-weight: 600;
    white-space: nowrap;
}

.content-add-split__primary-btn i {
    color: var(--success-text);   /* gruenes "+" wie sonst */
    font-size: 16px;
}

.content-add-split__primary-btn:hover {
    background: var(--bg-hover);
    color: #1E3391;
}

/* rechter Teil: Caret als gleich hohes Segment; border-left = Trenner */
.content-add-split--labeled .content-add-split__caret {
    margin-left: 0;
    align-self: stretch;
    padding: 0 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    border-left: 1px solid var(--border-light);
}

.content-add-split--labeled .content-add-split__caret:hover {
    background: var(--bg-hover);
}

/* CARITAS-DMS: Vollstaendigkeits-Indikator (segmentierter Balken) */
.doc-completeness {
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text-medium);
}

.doc-completeness__count {
    color: var(--text-dark);
}

.doc-completeness__segments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}

.doc-completeness__seg {
    width: 20px;
    height: 8px;
    border-radius: 3px;
    background: var(--border-light);   /* leer / fehlt */
}

.doc-completeness__seg--filled {
    background: var(--success-text);   /* vorhanden */
}

.doc-completeness--complete .doc-completeness__label,
.doc-completeness--complete .doc-completeness__count,
.doc-completeness__check {
    color: var(--success-text);
}

/* CARITAS-DMS: Position des Vollstaendigkeits-Balkens (Footer bzw. Header) */

/* CARITAS-DMS: Dashboard-Header (Vertrag): Titel + Balken + Add-Button in einer Zeile */
.doc-dash-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.doc-dash-header__title {
    font-weight: bold;
}

.doc-dash-header .content-add-split {
    margin-left: auto;
}

/* === Tagesdokumentation (DailyDocumentation) Tile === */
.dd-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* max. 2 Tabellen nebeneinander */
    gap: 14px;
    align-items: start;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .dd-card-grid,
    .dd-details {
        grid-template-columns: 1fr;
    }
}

.dd-addlink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    color: var(--primary-blue);
    text-decoration: none;
}

.dd-addlink:hover {
    text-decoration: underline;
}

.dd-input--error {
    border: 1px solid var(--msg-error-border);
    background: #fff0f0;
}

.dd-error-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--border-radius-small);
    background: var(--msg-error-bg);
    color: var(--msg-error-text);
    border-left: 4px solid var(--msg-error-border);
    font-weight: 600;
}

.dd-card {
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    background: #fff;
    box-shadow: var(--shadow-small);
    overflow: hidden;
    min-width: 0;   /* Grid-Item darf unter die Tabellen-Min-Breite schrumpfen (sonst Overflow/Ueberlappung) */
}

.dd-card__title {
    font-weight: 600;
    color: var(--text-dark);
    padding: 8px 12px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-light);
}

.dd-card__body {
    padding: 10px 12px;
    overflow-x: auto;
}

.dd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dd-table th,
.dd-table td {
    border: 1px solid var(--border-light);
    padding: 4px 8px;
    white-space: nowrap;
}

.dd-table thead th {
    background: var(--bg-light);
    font-weight: 600;
    text-align: center;
}

.dd-table td.dd-cat {
    text-align: left;
}

.dd-table th.dd-num,
.dd-table td.dd-num {
    text-align: right;
    width: 58px;
}

.dd-table .dd-rowhead {
    font-weight: 600;
    text-align: left;
    background: var(--bg-light);
}

.dd-table tr.dd-total td {
    font-weight: 700;
    background: var(--bg-light);
}

.dd-zero {
    color: #b0b0b0;
}

.dd-table input.dd-input {
    width: 44px;
    text-align: right;
}

/* Variante SUMMARY: KPI-Summenband + Detailblock */
.dd-stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.dd-stat {
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-medium);
    background: #fff;
    box-shadow: var(--shadow-small);
    padding: 12px 14px;
    text-align: center;
}

.dd-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.1;
}

.dd-stat__label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.dd-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* max. 2 Tabellen nebeneinander */
    gap: 14px 18px;
}

/*
 * Grid-Items der SUMMARY-Detailblöcke müssen unter die Min-Content-Breite der Tabelle
 * schrumpfen dürfen (min-width:0), sonst sprengen die nowrap-Tabellen die Spalten und
 * überlappen bzw. ragen über den Panel-Bereich hinaus. Bei zu schmaler Spalte scrollt der
 * Block horizontal (wie .dd-card__body bei den Cards), statt sichtbar zu überlaufen.
 */
.dd-details > div {
    min-width: 0;
    overflow-x: auto;
}

.dd-block__title {
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 6px 0;
}

/* === MASKEN-HILFE: Lesbarkeit der Hilfetexte === */
/*
 * Gilt fuer jeden Hilfetext, der ueber view/tiles/helpIcon.xhtml eingebunden wird -
 * dessen Container-div traegt .help-content, und alle so eingebundenen Hilfetexte
 * laufen durch diesen einen Container (Bestand wie kuenftige Texte).
 * Ausgenommen ist view/help/videos.xhtml: das ist kein Include, sondern eine
 * eigenstaendige Seite mit eigenem <head> (verlinkt aus view/layout/menu.xhtml),
 * die diese Klasse nie traegt und daher von den Regeln hier nicht erfasst wird.
 *
 * Zwei Korrekturen, beide strikt auf .help-content beschraenkt - ausserhalb der
 * Hilfe-Dialoge aendert sich nichts:
 *  1. Zwischenueberschriften erben global (h1..h6) die Headline-Schrift 'ES Build'.
 *     Die ist stark kondensiert und in laengeren Fliesstexten schlecht lesbar -
 *     hier daher die Fliesstext-Schrift (Inter) wie im uebrigen Hilfetext.
 *  2. Der globale Reset (* { margin: 0; padding: 0; }) nimmt Ueberschriften,
 *     Absaetzen und Listen jeden vertikalen Abstand; Ueberschriften kleben am
 *     vorigen Absatz, Listen laufen ohne Trennung durch. Die Abstaende werden
 *     hier gezielt wiederhergestellt.
 * Die Zeilenhoehe (1.5) setzt der Container selbst per Inline-Style.
 */

.help-content h1,
.help-content h2,
.help-content h3,
.help-content h4,
.help-content h5,
.help-content h6 {
	font-family: var(--font-family-base);
	margin: 16px 0 6px 0;
}

/*
 * Der globale Reset setzt auch die Schriftgroesse (* { font-size: var(--font-size-base) }),
 * Ueberschriften waeren also genauso gross wie der Fliesstext. Da viele Listeneintraege der
 * Hilfetexte mit fett gesetzten Begriffen beginnen ("Gueltig ab:", ...), waere eine
 * Zwischenueberschrift allein an font-weight: bold nicht mehr als Gliederungsebene
 * erkennbar - sie braucht zusaetzlich Groesse. Aktuell nutzen alle Hilfetexte nur h4;
 * die drei Stufen sind bewusst grob, damit benachbarte Ebenen in kuenftigen Texten
 * tatsaechlich unterscheidbar sind - 1px-Schritte waeren es nicht.
 * Der Universalselektor hat Spezifitaet 0-0-0, .help-content hN liegt mit 0-1-1 darueber -
 * kein !important noetig.
 */
.help-content h1,
.help-content h2 { font-size: var(--font-size-heading); }
.help-content h3,
.help-content h4 { font-size: 13px; }
.help-content h5,
.help-content h6 { font-size: 12px; }

/* Erste Ueberschrift im Dialog ohne Abstand nach oben */
.help-content h1:first-child,
.help-content h2:first-child,
.help-content h3:first-child,
.help-content h4:first-child,
.help-content h5:first-child,
.help-content h6:first-child {
	margin-top: 0;
}

.help-content p {
	margin-bottom: 8px;
}

.help-content ul,
.help-content ol {
	margin-bottom: 8px;
	padding-left: 18px;
}

.help-content li {
	margin-bottom: 3px;
}

/* =============================================================================
 * Anrechnung (Zusammenfassung) — Kontingent-Balken
 *
 * Ausschliesslich fuer das Summen-Panel der Mitarbeiter-Vordienstzeiten
 * (view/employee/showEmployeeCreditingDetails.xhtml, Bereich #areaCdSum).
 * Alle Regeln sind bewusst unter .cd-summary gescoped, weil die Klassennamen
 * (.q, .bar, .pair, ...) generisch sind und ausserhalb dieses Panels nichts
 * treffen duerfen.
 * ========================================================================== */

.cd-summary .q {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3px 12px;
	margin-bottom: 13px;
}

.cd-summary .q-label {
	font-weight: 700;
	font-size: 11px;
	line-height: 1.35;
}

.cd-summary .q-rest {
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	text-align: right;
	white-space: nowrap;
	align-self: end;
}

.cd-summary .q-rest b {
	font-weight: 700;
}

.cd-summary .q-rest span {
	color: var(--text-lighter);
	font-weight: 400;
}

.cd-summary .bar {
	grid-column: 1 / -1;
	height: 7px;
	border-radius: 4px;
	background: var(--bg-medium);
	overflow: hidden;
	display: flex;
}

.cd-summary .bar .bar-fill {
	flex: 0 0 auto;
	height: 100%;
	background: var(--primary-blue);
	border-radius: 4px;
}

/* Ausgeschoepfter Deckel: der Balken wechselt in die Warnfarbe. */
.cd-summary .bar .bar-fill.full {
	background: var(--warning-border);
}

.cd-summary .q-meta {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 10.5px;
	color: var(--text-lighter);
	font-variant-numeric: tabular-nums;
}

/* Teilkontingent unter einem Gesamtdeckel */
.cd-summary .q.sub {
	margin-left: 14px;
	border-left: 2px solid var(--border-light);
	padding-left: 12px;
}

/* Gesamtdeckel */
.cd-summary .q.total .q-label {
	font-size: 11.5px;
}

.cd-summary .q.total .bar {
	height: 9px;
}

/* Kontingente ohne Deckel */
.cd-summary .uncapped {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px dashed var(--border-light);
	margin-top: 12px;
	padding-top: 9px;
}

.cd-summary .uncapped .l {
	font-weight: 700;
	font-size: 11px;
}

.cd-summary .uncapped .v {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--secondary-yellow);
}

.cd-summary .uncapped.zero .v {
	color: var(--text-lighter);
	font-weight: 400;
}

/*
 * Deckelloses Kontingent ohne Balken darueber: Die Absetzung von .uncapped
 * setzt Balken voraus, von denen sie abgrenzt. Fehlen die, stuende die
 * Trennlinie freischwebend unter der Panel-Ueberschrift (Topf "Urlaub gem.
 * KV", der nur Paragraf 16 Abs 3 kennt). Rein additive Regel: Die Klasse
 * vergibt getUncappedRowStyleClass() nur bei leerer Balken-Liste des Topfes,
 * die Toepfe "Gehalt/Vorrueckung" und "Urlaub gesetzlich" erhalten sie nicht.
 */
.cd-summary .uncapped.bare {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* Fussbereich: Zeitachse und Vorrueckungsstichtag */
.cd-summary .pot-foot {
	border-top: 1px solid var(--border-light);
	margin: 12px 0 0 0;
	padding-top: 9px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 10.5px;
	color: var(--text-lighter);
}

.cd-summary .pot-foot .pair {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.cd-summary .pot-foot dt {
	font-weight: 700;
}

.cd-summary .pot-foot dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * Kontexthilfe zur Anspruchsart im Erfassungsdialog der Vordienstzeiten
 * (showEmployeeCreditingDetails.xhtml, Panel pnlCdDyn).
 *
 * Alle Regeln sind unter .cd-type-info gescoped - .lead, .sec und .rub sind
 * generische Namen und duerfen ausserhalb dieses Panels nichts treffen.
 *
 * Bewusst nur gestapelte Bloecke: Rubrikbezeichnung als Ueberschrift, Text
 * darunter ueber die volle Breite. Ein zweispaltiges Raster stand hier schon
 * einmal (feste Spalte + 1fr) und ist gescheitert - faellt der Container
 * zusammen, geht die 1fr-Spalte auf 0 und der Text bricht nach jedem Wort um.
 * Gestapelte Bloecke werden im schlimmsten Fall schmaler, nie unbrauchbar.
 * Die Breite des Blocks steht als Inline-Style im XHTML, weil sie zum
 * minWidth des Dialogs gehoert - siehe Kommentar dort.
 * ========================================================================== */

.cd-type-info {
	margin: 4px 0 10px 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--text-light);
}

.cd-type-info .lead {
	font-weight: 700;
	margin-bottom: 6px;
}

.cd-type-info .sec {
	margin-bottom: 6px;
}

.cd-type-info .rub {
	font-weight: 700;
	color: var(--text-lighter);
}


/* =============================================================================
 * Einstufungs-Vorschau: der Rechenweg von der Vordienstzeit zur Gehaltsstufe
 *
 * Zwei Stellen zeigen dieselbe Rechnung und sind deshalb gleich ausgezeichnet:
 * der Uebernahmedialog der Vordienstzeiten
 * (view/employee/showEmployeeCreditingDetails.xhtml) und der
 * Ersteinstufungs-Teil des Anrechnungsdialogs (view/employee/show.xhtml,
 * mpECred).
 *
 * Warum nicht .cd-summary .pot-foot, das hier zuerst stand: Jener Block ist
 * die FUSSZEILE eines Topfes - 10.5px, durchgehend --text-lighter, alle Paare
 * nebeneinander in einer umbrechenden Flex-Zeile. Fuer zwei, drei Nebenangaben
 * traegt das. Hier stehen bis zu fuenf Werte, darunter eine Subtraktion
 * (Angerechnet insgesamt - in Stufenspruengen verbraucht = Restanteil) und ihr
 * Ergebnis: die Gehaltsstufe. In der Fusszeilen-Auszeichnung stand all das
 * gleichrangig und gleich grau nebeneinander - die Rechnung war als Rechnung
 * nicht mehr zu erkennen (Rueckmeldung zur Sichtpruefung 2.0.49 anhand von
 * Bildschirmfotos, 30.08.2026 - der Fallkatalog kennt dafuer keine Nummer;
 * Fall E8 betrifft die Anmerkung in der Spalte NOTE, nicht diese Vorschau).
 *
 * Die Formensprache ist von .cd-summary .q uebernommen (Raster 1fr auto,
 * tabular-nums, dieselben Farbvariablen) - kein neues Gestaltungsvokabular,
 * nur eine dem Zweck angemessene Zusammenstellung. Alle Regeln sind unter
 * .grade-preview gescoped, weil .line, .l, .v, .d, .calc generische Namen sind
 * und ausserhalb dieses Blocks nichts treffen duerfen.
 * ========================================================================== */

.grade-preview {
	margin-top: 8px;
	padding-top: 9px;
	border-top: 1px solid var(--border-light);
}

/*
 * Eine Zeile je Angabe: Bezeichnung links, Wert rechts buendig. Gleiche
 * Laufweite der Ziffern (tabular-nums wie .cd-summary .q-rest), damit die
 * Betraege untereinander stehen und sich als Rechnung lesen lassen.
 */
.grade-preview .line {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	align-items: baseline;
	padding: 2px 0;
}

.grade-preview .l {
	font-size: 11px;
	color: var(--text-light);
}

.grade-preview .v {
	font-size: 11px;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--text-dark);
}

/* Ergebniszeile: die Stufe ist die Zahl, auf die es ankommt. */
.grade-preview .line.result .l {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-dark);
}

.grade-preview .line.result .v {
	font-size: 15px;
	color: var(--primary-blue);
}

/* Stufenbezeichnung hinter dem Schluessel ("3 (Fachkraft)"): erlaeuternd, also
   nicht in der Groesse und Farbe des Ergebnisses. */
.grade-preview .line.result .v .d {
	font-size: 11px;
	font-weight: 400;
	color: var(--text-lighter);
}

/* Rechenblock: die drei Zeilen gehoeren zusammen und stehen enger beieinander
   als die uebrigen Angaben. */
.grade-preview .calc {
	margin-top: 6px;
}

/* Abzugszeile eingerueckt - sie ist ein Teil der Zeile darueber, keine eigene
   Groesse. */
.grade-preview .calc .line.sub .l {
	padding-left: 12px;
}

.grade-preview .calc .line.sub .v {
	font-weight: 400;
	color: var(--text-light);
}

/* Summenstrich ueber dem Restanteil - dieselbe Linienfarbe wie die Trennlinien
   der Tabellen (--border-medium), damit die Rechnung wie eine Rechnung
   aussieht und nicht wie ein zusaetzlicher Rahmen. */
.grade-preview .calc .line.total {
	border-top: 1px solid var(--border-medium);
	margin-top: 2px;
	padding-top: 4px;
}

.grade-preview .calc .line.total .l {
	font-weight: 700;
	color: var(--text-dark);
}

/* Nachgestellte Angabe (naechster Vorrueckungstermin): gehoert nicht zur
   Subtraktion und steht deshalb abgesetzt und ohne Fettung. */
.grade-preview .line.meta {
	margin-top: 6px;
}

.grade-preview .line.meta .v {
	font-weight: 400;
}

/*
 * Leerer Zustand des Vorschau-Bereichs: die Meldung, die an der Stelle steht,
 * an der gleich die Rechnung erscheint. Ihr Text kommt aus dem Bundle,
 * Schluessel crediting.grade.initialGrading.noPreview, und lautet dort zur
 * Zeit "Sobald Gehaltstabelle und Gruppe gewaehlt sind, steht hier die
 * berechnete Einstufung."
 *
 * Das Zitat ist eine KOPIE zur Veranschaulichung, der Schluessel ist die
 * Quelle. Wer den Text im Bundle aendert, zieht ihn hier nach oder streicht
 * das Zitat. Die Herkunftsangabe steht dabei, weil ein Zitat ohne sie
 * unbemerkt veraltet - genau das war Befund S1 dieses Reviews, an der
 * Schwesterstelle in employee/show.xhtml.
 *
 * Sie ist eine ZUSTANDSMELDUNG, keine Anleitung - deshalb ausdruecklich NICHT
 * kursiv. Kursiv-grau (.hint) ist in diesen Dialogen die Auszeichnung fuer
 * Hinweise; sie stand hier bis zur Bildschirmfoto-Rueckmeldung zur
 * Sichtpruefung 2.0.49 (Fall P7, 30.08.2026) und liess zwei Bloecke gleich
 * aussehen, die Verschiedenes sagen: darueber die Anleitung zum Eingabefeld,
 * hier der Platzhalter der Vorschau.
 *
 * Der Platzhalter traegt denselben Rahmen wie der gefuellte Zustand
 * (styleClass="grade-preview placeholder"): Abstand, Trennlinie und
 * Innenabstand kommen aus .grade-preview selbst. Dadurch springt der Block
 * beim Wechsel vom leeren zum gefuellten Zustand nicht. Uebrig bleibt hier nur
 * die Textauszeichnung, und die entspricht der Bezeichnungsspalte der
 * Vorschau (.grade-preview .l) - die Meldung sitzt in derselben Zeile wie
 * spaeter "Angerechnet insgesamt" und soll auch so wirken.
 *
 * BEWUSST OHNE max-width: Die Breitenbegrenzung der Hinweistexte
 * (.hint-block.narrow, 40em) waere hier schaedlich. Sie begrenzt den Kasten
 * mitsamt seiner Trennlinie, und da .grade-preview selbst unbegrenzt ist,
 * spraenge die Linie beim Erscheinen der Vorschau auf die volle Breite. Der
 * Text ist kurz genug, um ohne Begrenzung flach zu laufen.
 *
 * Der Modifikator ist an .grade-preview gebunden; .placeholder allein trifft
 * nichts.
 */
.grade-preview.placeholder {
	font-size: 11px;
	color: var(--text-light);
}

/*
 * Breitenbegrenzung fuer dezente Hinweistexte ausserhalb eines
 * Formularrasters. .hint-block macht den Hinweis zum Block, begrenzt seine
 * Breite aber nur innerhalb von .field-with-hint - in einem Dialog laeuft er
 * sonst ueber die volle Breite, und kursiver Text ist ueber lange Zeilen
 * schlecht zu lesen. Dieselbe Breite wie dort (40em), damit beide Orte gleich
 * umbrechen. Verwendung: styleClass="hint hint-block narrow".
 */
.hint-block.narrow {
	max-width: 40em;
}