/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Imports
---------------------------------------------------------------------------------------------------------------------------------- */
@import url(fonts/hind-vadodara/hind-vadodara.css); /* lokal statt Google Fonts (Punkt 12, DSGVO) */
/*@import url(https://indestructibletype.com/fonts/Jost.css);*/

/* Reboot-Anpassungen zuerst, damit die projekteigenen Regeln weiter unten gewinnen */
@import url("bootstrap-anpassungen.css");

@import url("abstaende.css");
@import url("fonts.css");
@import url("sidebar.css");
@import url("seitenleiste.css"); /* rechte Leiste der Masken (sidebar.css = Navigation links) */
@import url("navbar.css");

@import url("datatables.css");
@import url("dt_columns.css");
@import url("tabs.css");
@import url("alerts.css");
@import url("splash.css");
@import url("sortable.css");

@import url("aufgaben.css");
@import url("wichtige-informationen.css");
@import url("suche.css");
@import url("pendenzen.css"); /* Pendenzen / Bug-Reporting: Kennzahlen, Liste, Board, Verlauf */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Farbvorlage (Profil -> Design -> Template)
  Die Basiswerte --tp-akzent / --tp-primaer (+ *-rgb) schreibt App\System\Profil\Template::getStyleTag() als :root-Block in den
  Seitenkopf. Hier wird nur abgeleitet: alle Zwischentoene des Designs (Kacheln, Kopfzeilen, Hover, Fokus) entstehen per color-mix()
  aus den zwei Basiswerten, damit jede Vorlage - und die eigene Farbe des Benutzers - die ganze Oberflaeche faerbt.
  Nicht vorlagenabhaengig bleiben Rot/Gelb/Gruen (inaktiv, Warnung, Erfolg) und die Grau-Neutralen (Rahmen, gedaempfter Text).
  Die Werte in den Kommentaren sind die frueheren festen Blautoene der Vorlage "Temprong" (Referenz beim Vergleichen).
---------------------------------------------------------------------------------------------------------------------------------- */
/* Rueckfall, falls der :root-Block aus dem Seitenkopf fehlt (z.B. Fehlerseite). Bewusst "html" statt ":root": der Typselektor
   unterliegt dem :root-Block des Seitenkopfs unabhaengig von der Ladereihenfolge (der Seitenkopf steht vor backend.css). */
html {
	--tp-akzent: #153d77;
	--tp-primaer: #3b7ddd;
	--tp-akzent-rgb: 21, 61, 119;
	--tp-primaer-rgb: 59, 125, 221;
	--tp-primaer-hover-rgb: 50, 106, 188;
}

:root {
	/* ------------------------------------------------------------------------------------------------------------------
       Neutrale (Dunkelmodus, 16.09.2026): Flaechen, Text, Raender. Hell hier, dunkel in cms/css/dunkel.css unter
       html[data-bs-theme="dark"]. Die Ableitungen weiter unten mischen gegen --tp-basis / --tp-text-basis - im
       Dunkelmodus kippen nur diese Grundwerte und die Mischanteile (--tp-m-*), alle Zwischentoene folgen von selbst.
       ------------------------------------------------------------------------------------------------------------------ */
	--tp-basis: #fff; /* Mischgrund der Flaechen (hell: weiss) */
	--tp-text-basis: #000; /* Mischziel fuer Text auf Kacheln (hell: schwarz) */
	--tp-flaeche: #fff; /* Karten, Fieldset-Karten, Aufklappmenues, Modale */
	--tp-flaeche-2: #f8f9fa; /* gestreifte Zeilen, leise Flaechen, Fieldset-Grund (--bg-template-04) */
	--tp-flaeche-3: #e9ecef; /* Sidebar aktiv, .bg-light, Trenner-Flaechen */
	--tp-feld: #fff; /* Eingabefelder */
	--tp-feld-rand: #ced4da;
	--tp-text: #3e4676; /* Fliesstext (body) */
	--tp-titel: #203a45; /* Ueberschriften, kraeftiger Text */
	--tp-text-leise: #6c757d; /* text-muted, Beschriftungen */
	--tp-text-blass: #8a93a6; /* Nebeninfos, Platzhalter */
	--tp-text-blasser: #b6bcc9; /* inaktive Kacheln, Trenner-Symbole */
	--tp-rand: #dee2e6; /* Karten-, Tabellen-, Listenraender */
	--tp-rand-leise: #dfe5ee; /* Fieldset-Karten, Kachel-Raender */
	--tp-grau: #6c757d; /* neutrale Abzeichen/Prio-Flaechen mit weisser Schrift */
	--tp-schatten: rgba(126, 142, 177, 0.12);
	--tp-band: var(
		--tp-akzent
	); /* Kopfband (.wrapper:before) - dunkel leicht abgedunkelt */
	--tp-link: var(
		--tp-primaer
	); /* Links - dunkel aufgehellt, sonst zu wenig Kontrast */
	--tp-akzent-text: var(
		--tp-akzent
	); /* Text/Symbole in Akzentfarbe (Sidebar-Symbole, Ueberschriften) - dunkel aufgehellt */

	/* Mischanteile (Prozent) der Ableitungen - dunkel hoeher, weil ein Ton auf dunklem Grund weniger auftraegt */
	--tp-m-kachel-bg: 12%;
	--tp-m-kachel-rand: 40%;
	--tp-m-kachel-text: 85%;
	--tp-m-kachel-hover: 20%;
	--tp-m-kachel-aktiv: 25%;
	--tp-m-tint: 8%;
	--tp-m-tint-rand: 30%;
	--tp-m-legende: 6%;
	--tp-m-hover: 12%;
	--tp-m-hover-leise: 7%;
	--tp-m-grund: 4%;
	--tp-m-semantik-bg: 16%;
	--tp-m-semantik-rand: 40%;
	--tp-m-semantik-text: 75%;

	/* Semantik: Rot/Gruen/Gelb/Orange - hell die bisherigen Werte, dunkel leicht aufgehellt (dunkel.css) */
	--tp-rot: #dc3545;
	--tp-rot-dunkel: #b02a37; /* Hover/Aktiv der roten Knoepfe */
	--tp-gruen: #198754;
	--tp-gruen-hell: #28a745; /* aelteres Bootstrap-Gruen (.bg-success, Status-Punkte) */
	--tp-gelb: #ffc107;
	--tp-orange: #fd7e14;
	/* weiche Semantik-Flaechen (Alerts, Hinweis-Kacheln, Abzeichen): Ton auf Basis gemischt, Text Richtung Text-Basis */
	--tp-rot-bg: color-mix(
		in srgb,
		var(--tp-rot) var(--tp-m-semantik-bg),
		var(--tp-basis)
	); /* #f9e1e3 (#fdecec, #f8d7da) */
	--tp-rot-rand: color-mix(
		in srgb,
		var(--tp-rot) var(--tp-m-semantik-rand),
		var(--tp-basis)
	); /* #f1aeb5 */
	--tp-rot-text: color-mix(
		in srgb,
		var(--tp-rot) var(--tp-m-semantik-text),
		var(--tp-text-basis)
	); /* #a52834 (#a32a2a) */
	--tp-gruen-bg: color-mix(
		in srgb,
		var(--tp-gruen) var(--tp-m-semantik-bg),
		var(--tp-basis)
	); /* #dbeee5 (#d1e7dd) */
	--tp-gruen-rand: color-mix(
		in srgb,
		var(--tp-gruen) var(--tp-m-semantik-rand),
		var(--tp-basis)
	); /* #a3cfbb */
	--tp-gruen-text: color-mix(
		in srgb,
		var(--tp-gruen) var(--tp-m-semantik-text),
		var(--tp-text-basis)
	); /* #136540 (#146c43) */
	--tp-gelb-bg: color-mix(
		in srgb,
		var(--tp-gelb) var(--tp-m-semantik-bg),
		var(--tp-basis)
	); /* #fff5d6 (#fff3cd) */
	--tp-gelb-rand: color-mix(
		in srgb,
		var(--tp-gelb) var(--tp-m-semantik-rand),
		var(--tp-basis)
	); /* #ffe69c */
	--tp-gelb-text: color-mix(
		in srgb,
		var(--tp-gelb) 60%,
		var(--tp-text-basis)
	); /* #997404 */
	--tp-orange-bg: color-mix(
		in srgb,
		var(--tp-orange) var(--tp-m-semantik-bg),
		var(--tp-basis)
	);
	--tp-orange-rand: color-mix(
		in srgb,
		var(--tp-orange) var(--tp-m-semantik-rand),
		var(--tp-basis)
	);
	--tp-orange-text: color-mix(
		in srgb,
		var(--tp-orange) var(--tp-m-semantik-text),
		var(--tp-text-basis)
	);

	/* Primaer: Knoepfe, Links, Fokus */
	--tp-primaer-hover: color-mix(in srgb, var(--tp-primaer) 85%, #000);
	--tp-primaer-aktiv: color-mix(in srgb, var(--tp-primaer) 78%, #000);
	--tp-fokus: rgba(var(--tp-primaer-rgb), 0.25);
	--tp-fokus-rahmen: color-mix(
		in srgb,
		var(--tp-primaer) 50%,
		var(--tp-basis)
	); /* #86b7fe */

	/* Kachel: Kennzeichen-Kacheln, .btn-kachel, Chips, Kontakt-Symbole, Abzeichen, Zaehler */
	--tp-kachel-bg: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-kachel-bg),
		var(--tp-basis)
	); /* #eaf2fd */
	--tp-kachel-border: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-kachel-rand),
		var(--tp-basis)
	); /* #a9c9f2 */
	--tp-kachel-text: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-kachel-text),
		var(--tp-text-basis)
	); /* #2b6cc4 */
	--tp-kachel-text-hover: color-mix(
		in srgb,
		var(--tp-primaer) 72%,
		var(--tp-text-basis)
	); /* #245ca8, #185abd */
	--tp-kachel-hover: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-kachel-hover),
		var(--tp-basis)
	); /* #dbe8fb */
	--tp-kachel-aktiv: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-kachel-aktiv),
		var(--tp-basis)
	); /* #d0e1f9 */
	--tp-kachel-border-hover: color-mix(
		in srgb,
		var(--tp-primaer) 55%,
		var(--tp-basis)
	); /* #8fb7ec */

	/* Leichte Einfaerbung: Auswahl, Zeilen-Hover, Filter-Chips */
	--tp-tint: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-tint),
		var(--tp-basis)
	); /* #eef4fd, #eaf1fc, #f1f5fb */
	--tp-tint-border: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-tint-rand),
		var(--tp-basis)
	); /* #b9d1f4 */

	/* Akzent-Ableitungen: Fieldset-Kopfzeilen, Seitengrund, Hover der Kopfzeilen-Knoepfe */
	--tp-legende-bg: color-mix(
		in srgb,
		var(--tp-primaer) var(--tp-m-legende),
		var(--tp-basis)
	); /* #f4f7fc */
	--tp-legende-text: color-mix(
		in srgb,
		var(--tp-akzent) 45%,
		var(--tp-text-leise)
	); /* #4b5b7d */
	--tp-hover: color-mix(
		in srgb,
		var(--tp-akzent) var(--tp-m-hover),
		var(--tp-basis)
	); /* #dfe7f3 */
	--tp-hover-leise: color-mix(
		in srgb,
		var(--tp-akzent) var(--tp-m-hover-leise),
		var(--tp-basis)
	); /* #eef2f8 */
	--tp-tab-bg: color-mix(
		in srgb,
		var(--tp-akzent) 7%,
		var(--tp-basis)
	); /* Reiter links aktiv */
	--tp-grund: color-mix(
		in srgb,
		var(--tp-akzent) var(--tp-m-grund),
		var(--tp-basis)
	); /* #f4f7fc (Seitengrund) */

	/* Legacy-Aliase der frueheren Vorlagendateien (cms/css/colors/*.css) - bestehende Stellen laufen unveraendert weiter */
	--bg-fima: var(--tp-primaer);
	--bg-template-01: var(--tp-akzent);
	--bg-template-02: var(--tp-primaer);
	--bg-template-03: var(--tp-legende-bg);
	--bg-template-04: var(--tp-flaeche-2);

	/* Bootstrap-Primaerfarbe mitziehen: Links, .bg-primary/.text-primary (ueber *-rgb), Fokusring */
	--bs-primary: var(--tp-primaer);
	--bs-primary-rgb: var(--tp-primaer-rgb);
	--bs-link-color: var(--tp-link);
	--bs-link-color-rgb: var(--tp-primaer-rgb);
	--bs-link-hover-color: var(--tp-primaer-hover);
	--bs-link-hover-color-rgb: var(--tp-primaer-hover-rgb);
	--bs-focus-ring-color: var(--tp-fokus);
}

/* Bootstrap-Bausteine mit festen Farbwerten (Bootstrap setzt hier Literale statt Variablen) */
.btn-primary {
	--bs-btn-bg: var(--tp-primaer);
	--bs-btn-border-color: var(--tp-primaer);
	--bs-btn-hover-bg: var(--tp-primaer-hover);
	--bs-btn-hover-border-color: var(--tp-primaer-hover);
	--bs-btn-focus-shadow-rgb: var(--tp-primaer-rgb);
	--bs-btn-active-bg: var(--tp-primaer-aktiv);
	--bs-btn-active-border-color: var(--tp-primaer-aktiv);
	--bs-btn-disabled-bg: var(--tp-primaer);
	--bs-btn-disabled-border-color: var(--tp-primaer);
}

.btn-outline-primary {
	--bs-btn-color: var(--tp-primaer);
	--bs-btn-border-color: var(--tp-primaer);
	--bs-btn-hover-bg: var(--tp-primaer);
	--bs-btn-hover-border-color: var(--tp-primaer);
	--bs-btn-focus-shadow-rgb: var(--tp-primaer-rgb);
	--bs-btn-active-bg: var(--tp-primaer);
	--bs-btn-active-border-color: var(--tp-primaer);
	--bs-btn-disabled-color: var(--tp-primaer);
	--bs-btn-disabled-border-color: var(--tp-primaer);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: var(--tp-fokus-rahmen);
	box-shadow: 0 0 0 0.25rem var(--tp-fokus);
}

.form-check-input:checked {
	background-color: var(--tp-primaer);
	border-color: var(--tp-primaer);
}

.form-range::-webkit-slider-thumb {
	background-color: var(--tp-primaer);
}

.form-range::-moz-range-thumb {
	background-color: var(--tp-primaer);
}

.form-range::-webkit-slider-thumb:active {
	background-color: var(--tp-fokus-rahmen);
}

.form-range::-moz-range-thumb:active {
	background-color: var(--tp-fokus-rahmen);
}

.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.progress-bar {
	background-color: var(--tp-primaer);
}

.list-group-item.active {
	border-color: var(--tp-primaer);
}

.border-primary {
	border-color: var(--tp-primaer) !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Defaults
---------------------------------------------------------------------------------------------------------------------------------- */
*,
:after,
:before {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

body,
html {
	height: 100%;
}

body {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background-color: var(--tp-grund);
	color: var(--tp-text);
	font-family: var(--bs-font-sans-serif);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--tp-titel);
	font-family:
		Jost,
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Helvetica Neue,
		Arial,
		sans-serif;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 0.5rem;
	margin-top: 0;
}

.h1,
h1 {
	font-size: 1.875rem;
}

.h2,
h2 {
	font-size: 1.64062rem;
}

.h3,
h3 {
	font-size: 1.40625rem;
}

.h4,
h4 {
	font-size: 1.17188rem;
}

.h5,
.h6,
h5,
h6 {
	font-size: 0.9375rem;
}

.display-1 {
	font-size: 4rem;
}

.display-1,
.display-2 {
	font-weight: 300;
	line-height: 1.2;
}

.display-2 {
	font-size: 3.5rem;
}

.display-3 {
	font-size: 3rem;
}

.display-3,
.display-4 {
	font-weight: 300;
	line-height: 1.2;
}

.display-4 {
	font-size: 2.5rem;
}

.display-5 {
	font-size: 2rem;
}

.display-5,
.display-6 {
	font-weight: 300;
	line-height: 1.2;
}

.display-6 {
	font-size: 1.5rem;
}

a {
	text-decoration: none;
}

pre {
	border: 1px dashed var(--tp-rand);
	background-color: var(--tp-flaeche-2);
	/*color: #111;*/
	padding: 10px;
}

pre.snippet {
	word-wrap: break-word;
	text-align: justify;
	white-space: pre-wrap;
}

a:active,
a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Felder
---------------------------------------------------------------------------------------------------------------------------------- */
input.password {
	font-family: "text-security-disc";
}

.help-block {
	font-style: italic;
	font-size: 0.85rem;
	margin-left: 5px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Breiten & Höhen
---------------------------------------------------------------------------------------------------------------------------------- */
.h-100 {
	height: 100% !important;
}

.w-100 {
	width: 100% !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Farben
---------------------------------------------------------------------------------------------------------------------------------- */
.bg-primary {
	background-color: var(--tp-primaer) !important;
}

.bg-secondary {
	background-color: #6f42c1 !important;
}

.bg-tertiary {
	background-color: #669ae5 !important;
}

.bg-success {
	background-color: var(--tp-gruen-hell) !important;
}

.bg-info {
	background-color: #20c997 !important;
}

.bg-warning {
	background-color: var(--tp-orange) !important;
}

.bg-danger {
	background-color: var(--tp-rot) !important;
}

.bg-light {
	background-color: var(--tp-flaeche-3) !important;
}

.bg-dark {
	background-color: var(--tp-akzent) !important;
}

.bg-body {
	background-color: var(--tp-grund) !important;
}

.bg-white {
	background-color: var(--tp-flaeche) !important;
}

.bg-transparent {
	background-color: transparent !important;
}

.bg-gradient {
	background-image: var(--bs-gradient) !important;
}

.bg-primary-light {
	background-color: #5c93e3 !important;
}

.bg-secondary-light {
	background-color: #855fca !important;
}

.bg-tertiary-light {
	background-color: #87afea !important;
}

.bg-success-light {
	background-color: #2fc652 !important;
}

.bg-info-light {
	background-color: #31deab !important;
}

.bg-warning-light {
	background-color: #fd933a !important;
}

.bg-danger-light {
	background-color: #e25663 !important;
}

.bg-light-light {
	background-color: var(--tp-flaeche) !important;
}

.bg-dark-light {
	background-color: #1a4d98 !important;
}

.bg-primary-dark {
	background-color: #2469ce !important;
}

.bg-secondary-dark {
	background-color: #5e37a6 !important;
}

.bg-tertiary-dark {
	background-color: #4684df !important;
}

.bg-success-dark {
	background-color: #218838 !important;
}

.bg-info-dark {
	background-color: #1ba87e !important;
}

.bg-warning-dark {
	background-color: #e96b02 !important;
}

.bg-danger-dark {
	background-color: #c82333 !important;
}

.bg-light-dark {
	background-color: var(--tp-flaeche-3) !important;
}

.bg-dark-dark {
	background-color: #0f2c56 !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Layout
---------------------------------------------------------------------------------------------------------------------------------- */
/*
@media (min-width:1440px) {
	.container-fluid,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		width: 95%
	}
}
*/

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Layout :: Rows & Cols
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Content-Wrapper
---------------------------------------------------------------------------------------------------------------------------------- */
.wrapper {
	align-items: stretch;
	display: flex;
	/* clip statt hidden (19.09.2026): beschneidet gleich (Sidebar-Animation, Kopfband), macht den Wrapper aber nicht zum
       Scroll-Container - sonst bleibt position: sticky im Inhalt wirkungslos. Der Kartenkopf, fuer den es eingefuehrt
       wurde, klebt seit 22.09.2026 nicht mehr; clip bleibt, damit kuenftiges sticky im Inhalt funktioniert. */
	overflow: clip;
	position: relative;
	width: 100%;
}

.wrapper:before {
	background-color: var(--tp-band);
	content: " ";
	height: 264px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.main {
	position: relative; /* 03.07.2025  */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
	transition:
		margin-left 0.3s ease-in-out,
		left 0.3s ease-in-out,
		margin-right 0.3s ease-in-out,
		right 0.3s ease-in-out;
	width: 100%;
}

/*
@media (max-width:767.98px) {
	.main {
		min-width: 100vw;
		overflow-y: hidden;
		width: 100vw
	}
}
*/

.content {
	flex: 1;
	/*margin-top: 3rem;*/
	margin-top: 0px; /*1rem;*/
	padding: 0 0.5rem;
}

@media (min-width: 992px) {
	.content {
		padding: 0 1rem;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Main-Content - Flexbox
---------------------------------------------------------------------------------------------------------------------------------- */
.flexbox {
	display: flex;
	gap: 20px;
}

.flexbox .flex-main {
	flex: 1;
}

.flexbox .flex-sidebar-250 {
	flex: 0 250px;
}
.flexbox .flex-sidebar-300 {
	flex: 0 300px;
}

.flexbox .flex-sidebar-400 {
	flex: 0 400px;
}

.flexbox .flex-main-1000 {
	flex: 1000px 0;
}

@media (max-width: 767.98px) {
	.flexbox {
		display: block;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Klappbare Seitenleiste (App.seitenleiste in app.js, Seitenleiste::attribute() in der Maske)
      - ist-leer: keine Karte mit Inhalt -> Leiste weg, Hauptkarte volle Breite (setzt das JS)
      - ist-eingeklappt: vom Benutzer eingeklappt -> nur der Griff (.sl-griff) bleibt stehen (serverseitig gerendert)
      - sl-bereit: Übergänge erst nach dem Erstzustand, sonst klappt die Leiste beim Laden sichtbar zu
---------------------------------------------------------------------------------------------------------------------------------- */
.flexbox > [data-seitenleiste] {
	position: relative;
	min-width: 0;
}

.flexbox > [data-seitenleiste].sl-bereit {
	transition:
		flex-basis 0.28s ease,
		opacity 0.2s ease,
		margin-left 0.28s ease;
}

.flexbox > [data-seitenleiste].ist-leer {
	flex-basis: 0;
	margin-left: -20px; /* Gap der Flexbox aufheben */
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

/* Kopfzeile (ausgeklappt) :: steht oben auf dem Kopfband (.wrapper:before), deshalb weisse Schrift */
.flexbox > [data-seitenleiste] > .sl-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 26px;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.flexbox > [data-seitenleiste] > .sl-kopf .sl-zaehler {
	display: inline-block;
	min-width: 18px;
	padding: 0 5px;
	margin-left: 6px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.flexbox > [data-seitenleiste] > .sl-kopf .sl-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.12s;
}

.flexbox > [data-seitenleiste] > .sl-kopf .sl-btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* Griff (eingeklappt) :: schmale, hohe Kachel mit Pfeil, Zähler und senkrechtem Titel */
.flexbox > [data-seitenleiste] > .sl-griff {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 34px;
	padding: 10px 0 12px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 6px;
	background: var(--tp-flaeche);
	color: var(--tp-primaer);
	font: inherit;
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 6px var(--tp-schatten);
	transition: background 0.12s;
}

.flexbox > [data-seitenleiste] > .sl-griff:hover {
	background: var(--tp-hover);
}

.flexbox > [data-seitenleiste] > .sl-griff .fas {
	font-size: 15px;
}

.flexbox > [data-seitenleiste] > .sl-griff .sl-zaehler {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--tp-primaer);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--tp-flaeche);
}

.flexbox > [data-seitenleiste] > .sl-griff .sl-zaehler:empty {
	display: none;
}

.flexbox > [data-seitenleiste] > .sl-griff .sl-griff-text {
	writing-mode: vertical-rl;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-text-blass);
	user-select: none;
}

@media (min-width: 768px) {
	/* Karten bleiben unsichtbar im Layout (App.seitenleiste zählt per offsetHeight, was etwas rendert) -
	   absolut aus dem Fluss, Container clippt sie; der Clip-Rand lässt das Zähler-Abzeichen des Griffs überstehen */
	.flexbox > [data-seitenleiste].ist-eingeklappt {
		flex-basis: 34px;
		overflow: clip;
		overflow-clip-margin: 10px;
	}

	.flexbox > [data-seitenleiste].ist-eingeklappt > :not(.sl-griff) {
		position: absolute;
		top: 0;
		left: 0;
		width: 300px;
		visibility: hidden;
		pointer-events: none;
	}

	.flexbox > [data-seitenleiste].ist-eingeklappt > .sl-griff {
		display: flex;
	}
}

/* gestapelt (unter 768px, .flexbox ist block): Leiste unter der Hauptkarte, kein Kopfband mehr -> ohne Kopfzeile und Griff;
   leer nicht per display:none (die Karten müssen messbar bleiben), sondern ohne Höhe */
@media (max-width: 767.98px) {
	.flexbox > [data-seitenleiste].ist-leer {
		height: 0;
		margin-left: 0;
	}

	.flexbox > [data-seitenleiste] > .sl-kopf {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flexbox > [data-seitenleiste].sl-bereit {
		transition: none;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Seiten-Titel :: Header
---------------------------------------------------------------------------------------------------------------------------------- */
/*
.header { 
    margin-bottom: 0px;
    position: relative;
}
	
.header-title h1 {
    font-size: 18px;
}
*/
/* Auffälligerer Hintergrund für den Seiten-Header, nur auf dieser Seite */
.header {
	background-color: var(--bg-template-01);
	background-image:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.18) 0%,
			rgba(255, 255, 255, 0) 45%
		),
		linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.25) 100%),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.06) 0,
			rgba(255, 255, 255, 0.06) 2px,
			transparent 2px,
			transparent 14px
		);
	border-radius: 0.5rem;
	padding: 1.75rem 2rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.header-title h1 {
	font-size: 1.75rem;
	font-weight: 600;
}

.header-title {
	font-size: 1.64062rem;
}

.header-subtitle {
	font-size: 0.9375rem;
}

.header-title h1,
.header-subtitle p {
	color: #fff;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Seiten-Titel :: Breadcrumb
---------------------------------------------------------------------------------------------------------------------------------- */
.breadcrumb {
	background-color: transparent;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-bottom: 1rem;
	padding: 0;
}

.breadcrumb-item + .breadcrumb-item {
	padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item:before {
	color: var(--tp-text-blasser);
	content: var(--bs-breadcrumb-divider, "/");
	float: left;
	padding-right: 0.5rem;
}

.breadcrumb-item a {
	color: #dee2e6;
	font-weight: 400;
	text-decoration: none;
}
.breadcrumb-item a:hover {
	text-decoration: underline;
}

.breadcrumb-item.active {
	color: #fff;
	font-weight: 500;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Dropdown-Menu
---------------------------------------------------------------------------------------------------------------------------------- */
.navbar-nav .dropdown-menu {
	box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.05);
}

.dropdown-toggle:after {
	border: solid;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 2px;
	transform: rotate(45deg);
}

.dropdown-item {
	transition:
		background 0.1s ease-in-out,
		color 0.1s ease-in-out;
}
.dropdown-menu-lg {
	min-width: 20rem;
}

.dropdown .list-group .list-group-item {
	border-width: 0 0 1px;
	margin-bottom: 0;
}

.dropdown .list-group .list-group-item:first-child,
.dropdown .list-group .list-group-item:last-child {
	border-radius: 0;
}

.dropdown .list-group .list-group-item:hover {
	background: var(--tp-flaeche-2);
}

.dropdown-menu-header {
	border-bottom: 1px solid var(--tp-rand);
	font-weight: 500;
	padding: 0.75rem;
	text-align: center;
}

.dropdown-menu-footer {
	display: block;
	font-size: 0.75rem;
	padding: 0.5rem;
	text-align: center;
}

/* Caret bei Dropdown-Buttons verstecken */
.dropdown-toggle.no-caret::after {
	display: none !important;
}

/* optional: etwas rechten Innenabstand zurückholen, weil Bootstrap Platz für den Caret vorsieht */
.dropdown-toggle.no-caret {
	padding-right: 0.5rem;
}

.dropdown-header {
	--bs-dropdown-header-padding-y: 2px;
	padding: var(--bs-dropdown-header-padding-y)
		var(--bs-dropdown-header-padding-x);
	font-style: italic !important;
	font-size: 0.85rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Cards
---------------------------------------------------------------------------------------------------------------------------------- */
.card {
	word-wrap: break-word;
	background-clip: border-box;
	background-color: var(--tp-flaeche);
	/* Rahmen wie bei .list-group - ohne ihn steht die Karte unsichtbar auf dem Seitenhintergrund */
	border: 1px solid var(--bs-border-color, var(--tp-rand));
	border-radius: 0.2rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
}

.card > hr {
	margin-left: 0;
	margin-right: 0;
}

.card > .list-group {
	border-bottom: inherit;
	border-top: inherit;
}

.card > .list-group:first-child {
	border-top-left-radius: 0.2rem;
	border-top-right-radius: 0.2rem;
	border-top-width: 0;
}

.card > .list-group:last-child {
	border-bottom-left-radius: 0.2rem;
	border-bottom-right-radius: 0.2rem;
	border-bottom-width: 0;
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
	border-top: 0;
}

.card-body {
	flex: 1 1 auto;
	padding: 1.25rem;
}

.card-title {
	/*margin-bottom: .5rem;*/
	margin-bottom: 0px;
}

.card-subtitle {
	margin-top: -0.25rem;
}

.card-subtitle,
.card-text:last-child {
	margin-bottom: 0;
}

.card-link:hover {
	text-decoration: none;
}

.card-link + .card-link {
	margin-left: 1.25rem;
}

.card-header {
	background-color: var(--tp-flaeche);
	/*border-bottom: 1px solid var(--bs-border-color, #dee2e6);*/
	border-bottom: 0 solid rgba(0, 0, 0, 0.125);

	margin-bottom: 0;
	padding: 0.75rem 1.25rem;
}

.card-header:first-child {
	border-radius: 0.2rem 0.2rem 0 0;
}

.card-footer {
	background-color: var(--tp-flaeche);
	border-top: 1px solid var(--bs-border-color, var(--tp-rand));
	padding: 0.75rem 1.25rem;
}

.card-footer:last-child {
	border-radius: 0 0 0.2rem 0.2rem;
}

.card-header-tabs {
	border-bottom: 0;
	margin-bottom: -0.75rem;
	margin-left: -0.625rem;
	margin-right: -0.625rem;
}

.card-header-tabs .nav-link.active {
	background-color: var(--tp-flaeche);
	border-bottom-color: #fff;
}

.card-header-pills {
	margin-left: -0.625rem;
	margin-right: -0.625rem;
}

.card-actions {
	height: 100%;
	/*padding-right: 10px;*/
}

.card-img-overlay {
	border-radius: 0.2rem;
	bottom: 0;
	left: 0;
	padding: 1rem;
	position: absolute;
	right: 0;
	top: 0;
}

.card-img,
.card-img-bottom,
.card-img-top {
	width: 100%;
}

.card-img,
.card-img-top {
	border-top-left-radius: 0.2rem;
	border-top-right-radius: 0.2rem;
}

.card-img,
.card-img-bottom {
	border-bottom-left-radius: 0.2rem;
	border-bottom-right-radius: 0.2rem;
}

.card-group > .card {
	margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
	.card-group {
		display: flex;
		flex-flow: row wrap;
	}
	.card-group > .card {
		flex: 1 0 0%;
		margin-bottom: 0;
	}
	.card-group > .card + .card {
		border-left: 0;
		margin-left: 0;
	}
	.card-group > .card:not(:last-child) {
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
	}
	.card-group > .card:not(:last-child) .card-header,
	.card-group > .card:not(:last-child) .card-img-top {
		border-top-right-radius: 0;
	}
	.card-group > .card:not(:last-child) .card-footer,
	.card-group > .card:not(:last-child) .card-img-bottom {
		border-bottom-right-radius: 0;
	}
	.card-group > .card:not(:first-child) {
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
	.card-group > .card:not(:first-child) .card-header,
	.card-group > .card:not(:first-child) .card-img-top {
		border-top-left-radius: 0;
	}
	.card-group > .card:not(:first-child) .card-footer,
	.card-group > .card:not(:first-child) .card-img-bottom {
		border-bottom-left-radius: 0;
	}
}

.card {
	box-shadow: 0 2px 4px rgba(126, 142, 177, 0.12);
	margin-bottom: 0.75rem; /* vor 15.01.2025 = 1.5rem  */
}

a.card {
	cursor: pointer;
	text-decoration: none;
}

.card-header {
	background: transparent;
}

.card-body {
	/*padding-top: .75rem;*/
	padding-top: 0px;
}

.card-title {
	color: var(--tp-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: normal;
}

.card-subtitle {
	font-weight: 400;
}

.card-table {
	margin-bottom: 0;
}

.card-table tr td:first-child,
.card-table tr th:first-child {
	padding-left: 1.25rem;
}

.card-table tr td:last-child,
.card-table tr th:last-child {
	padding-right: 1.25rem;
}

.card-img,
.card-img-bottom,
.card-img-top {
	height: auto;
	max-width: 100%;
}

@media (-ms-high-contrast: none) {
	.card-img,
	.card-img-bottom,
	.card-img-top {
		height: 100%;
	}
}

.card-actions a {
	color: var(--tp-text);
	text-decoration: none;
}

.card-actions svg {
	height: 16px;
	width: 16px;
}

.card-actions .dropdown {
	line-height: 1.4;
}

.card-img-hover {
	transition: all 0.1s ease-in-out;
}

.card-img-hover:hover {
	transform: scale(1.035);
}

.card-actions .pagination {
	padding: 0px;
	margin: 0px;
}

.pagination .page-link {
	color: var(--tp-akzent-text);
}
.pagination .page-item.active .page-link {
	background-color: var(--tp-akzent);
	border-color: var(--tp-akzent);
	color: #fff; /* weisse Schrift auf dem Akzent - in beiden Darstellungen (vorher --bg-template-04, das ist im Dunkeln dunkel) */
}

/*.paginate_button page-item active*/

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Cards / Tabellen
---------------------------------------------------------------------------------------------------------------------------------- */
.card > .table tbody,
.card > .table td,
.card > .table tfoot,
.card > .table th,
.card > .table thead,
.card > .table tr {
	border-color: var(--tp-rand);
}

.card > .dataTables_wrapper .table.dataTable,
.card > .table,
.card > .table-responsive-lg .table,
.card > .table-responsive-md .table,
.card > .table-responsive-sm .table,
.card > .table-responsive-xl .table,
.card > .table-responsive .table {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	margin-bottom: 0;
}

.card > .dataTables_wrapper .table.dataTable td:first-child,
.card > .dataTables_wrapper .table.dataTable th:first-child,
.card > .table-responsive-lg .table td:first-child,
.card > .table-responsive-lg .table th:first-child,
.card > .table-responsive-md .table td:first-child,
.card > .table-responsive-md .table th:first-child,
.card > .table-responsive-sm .table td:first-child,
.card > .table-responsive-sm .table th:first-child,
.card > .table-responsive-xl .table td:first-child,
.card > .table-responsive-xl .table th:first-child,
.card > .table-responsive .table td:first-child,
.card > .table-responsive .table th:first-child,
.card > .table td:first-child,
.card > .table th:first-child {
	border-left: 0;
	padding-left: 1.25rem;
}

.card > .dataTables_wrapper .table.dataTable td:last-child,
.card > .dataTables_wrapper .table.dataTable th:last-child,
.card > .table-responsive-lg .table td:last-child,
.card > .table-responsive-lg .table th:last-child,
.card > .table-responsive-md .table td:last-child,
.card > .table-responsive-md .table th:last-child,
.card > .table-responsive-sm .table td:last-child,
.card > .table-responsive-sm .table th:last-child,
.card > .table-responsive-xl .table td:last-child,
.card > .table-responsive-xl .table th:last-child,
.card > .table-responsive .table td:last-child,
.card > .table-responsive .table th:last-child,
.card > .table td:last-child,
.card > .table th:last-child {
	border-right: 0;
	padding-right: 1.25rem;
}

.card > .dataTables_wrapper .table.dataTable tr:first-child td,
.card > .dataTables_wrapper .table.dataTable tr:first-child th,
.card > .table-responsive-lg .table tr:first-child td,
.card > .table-responsive-lg .table tr:first-child th,
.card > .table-responsive-md .table tr:first-child td,
.card > .table-responsive-md .table tr:first-child th,
.card > .table-responsive-sm .table tr:first-child td,
.card > .table-responsive-sm .table tr:first-child th,
.card > .table-responsive-xl .table tr:first-child td,
.card > .table-responsive-xl .table tr:first-child th,
.card > .table-responsive .table tr:first-child td,
.card > .table-responsive .table tr:first-child th,
.card > .table tr:first-child td,
.card > .table tr:first-child th {
	border-top: 0;
}

.card > .dataTables_wrapper .table.dataTable tr:last-child td,
.card > .table-responsive-lg .table tr:last-child td,
.card > .table-responsive-md .table tr:last-child td,
.card > .table-responsive-sm .table tr:last-child td,
.card > .table-responsive-xl .table tr:last-child td,
.card > .table-responsive .table tr:last-child td,
.card > .table tr:last-child td {
	border-bottom: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Tabellen
---------------------------------------------------------------------------------------------------------------------------------- */

.table .th-no-padding {
	padding: 0.5rem 0rem !important;
}

.table tr td .table-action {
	/*visibility: hidden;*/
	opacity: 0.25;
}

.table tr:hover td .table-action {
	/*visibility:visible !important;*/
	opacity: 1;
}

.table-action a.table-dd-menu {
	color: var(--tp-text-leise);
	padding-right: 5px;
}
.table-action a.table-dd-menu:last-child {
	padding-right: 0px;
}

.table-action a:hover {
	color: var(--tp-titel);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Listen
---------------------------------------------------------------------------------------------------------------------------------- */

.list-group-item {
	padding: 0.75rem 1.25rem;
}

.list-group-item-xs {
	padding: 5px 10px;
	font-size: 14px;
}

.list-group-item.active {
	background-color: var(--bg-template-01);
	border-color: var(--bg-template-01);
	color: #fff;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Dropdowns
---------------------------------------------------------------------------------------------------------------------------------- */
.dropdown-item.danger {
	color: var(--tp-rot);
}
.dropdown-item.danger:active {
	color: #fff;
	background-color: var(--tp-rot);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Aktionsmenü der Listen (cms/js/aktionsmenue.js) - Drei-Punkte-Menü je Datensatz
  Kebab immer sichtbar (Grauton statt Deckkraft), Menü mit Kopf, Kacheln, beschrifteten Gruppen und abgesetzter Löschzone.
  Farben wie .kontakt-lead / .btn-kachel (Kennzeichen-Blau).
---------------------------------------------------------------------------------------------------------------------------------- */
.aktionsmenue {
	display: inline-block;
	line-height: 1;
}

.btn.aktionsmenue-kebab {
	width: 26px;
	height: 26px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: transparent;
	border-radius: 0.2rem;
	background-color: transparent;
	color: var(--tp-text-blass);
	font-size: 0.85rem;
	line-height: 1;
}

.btn.aktionsmenue-kebab:hover,
.btn.aktionsmenue-kebab:focus-visible,
.btn.aktionsmenue-kebab.show {
	border-color: transparent;
	background-color: var(--tp-hover-leise);
	color: var(--tp-titel);
}

.dropdown-menu.aktionsmenue-menu {
	min-width: 12rem;
	max-width: 22rem; /* lange Namen (verknuepfte Kunden, Kopfzeile) werden gekuerzt, voller Text im title */
	padding: 0.4rem 0;
	box-shadow: 0 0.5rem 1.25rem rgba(33, 40, 50, 0.14);
	text-align: left;
}

.dropdown-menu.aktionsmenue-menu.hat-kacheln {
	min-width: 16.5rem;
}

/* Kopf: wer ist gemeint */
.aktionsmenue-kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.25rem 0.875rem 0.625rem;
	margin-bottom: 0.125rem;
	border-bottom: 1px solid var(--tp-rand);
}

.aktionsmenue-avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.aktionsmenue-avatar i {
	font-size: 0.85rem;
}

.aktionsmenue-kopf-text {
	min-width: 0;
}

.aktionsmenue-titel {
	color: var(--tp-titel);
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aktionsmenue-titel .badge {
	font-size: 0.62rem;
	vertical-align: 1px;
	margin-left: 2px;
}

.aktionsmenue-meta {
	margin-top: 2px;
	color: var(--tp-text-leise);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Kacheln: häufige Aktionen nebeneinander */
.aktionsmenue-kacheln {
	display: flex;
	gap: 4px;
	padding: 0.375rem 0.625rem 0.25rem;
}

.aktionsmenue-kachel {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 7px 2px 5px;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-family: inherit;
	font-size: 0.64rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.aktionsmenue-kachel:hover,
.aktionsmenue-kachel:focus-visible {
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-tint);
	color: var(--tp-link);
}

.aktionsmenue-kachel i {
	font-size: 0.95rem;
}

.aktionsmenue-kachel span {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Gruppen-Überschrift statt Trennlinie */
.aktionsmenue-label {
	padding: 0.5rem 0.875rem 0.125rem;
	color: var(--tp-text-blass);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Einträge */
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 0.375rem 0.875rem;
	color: var(--tp-text);
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag > i,
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag > .aktionsmenue-hinweis {
	flex: 0 0 auto;
}

/* Beschriftung fuellt den Platz und wird bei Ueberlaenge mit Ellipse gekuerzt (title traegt den vollen Text) */
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag i {
	color: var(--tp-text-blass);
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag:hover,
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag:focus,
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag:active {
	background-color: var(--tp-hover-leise);
	color: var(--tp-titel);
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag:hover i,
.aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag:focus i {
	color: var(--tp-kachel-text);
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-haupt {
	color: var(--tp-titel);
	font-weight: 500;
}

.aktionsmenue-menu .dropdown-item.aktionsmenue-haupt i {
	color: var(--tp-kachel-text);
}

.aktionsmenue-hinweis {
	margin-left: auto;
	padding: 0 5px;
	border: 1px solid var(--tp-rand);
	border-radius: 3px;
	color: var(--tp-text-blass);
	font-size: 0.66rem;
	font-weight: 400;
	line-height: 1.5;
}

/* Löschzone: abgesetzt, immer zuunterst */
.aktionsmenue-loeschen {
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: 1px solid var(--tp-rot-rand);
}

.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag,
.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag i {
	color: var(--tp-rot);
}

.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag:hover,
.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag:focus,
.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag:active {
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-dunkel);
}

.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag:hover i,
.aktionsmenue-loeschen .dropdown-item.aktionsmenue-eintrag:focus i {
	color: var(--tp-rot-dunkel);
}

/* Kopf nur im Aktionsblatt (kopfNurBlatt) */
.dropdown-menu.aktionsmenue-menu .aktionsmenue-nur-blatt {
	display: none;
}

/* Handy: Aktionsblatt von unten statt Dropdown (Aktionsmenue.blattOeffnen) */
.aktionsmenue-blatt-hg {
	position: fixed;
	inset: 0;
	z-index: 1070;
	background-color: rgba(20, 28, 45, 0.42);
	opacity: 0;
	transition: opacity 0.2s;
}

.aktionsmenue-blatt-hg.offen {
	opacity: 1;
}

.aktionsmenue-blatt {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1071;
	max-height: 85vh;
	overflow-y: auto;
	padding: 6px 0 calc(14px + env(safe-area-inset-bottom, 0px));
	border-radius: 16px 16px 0 0;
	background-color: var(--tp-flaeche);
	box-shadow: 0 -0.5rem 1.5rem rgba(33, 40, 50, 0.18);
	transform: translateY(105%);
	transition: transform 0.22s ease-out;
}

.aktionsmenue-blatt.offen {
	transform: none;
}

.aktionsmenue-greifer {
	width: 40px;
	height: 4px;
	margin: 4px auto 8px;
	border-radius: 2px;
	background-color: var(--tp-rand);
}

.aktionsmenue-blatt .aktionsmenue-kopf {
	padding: 4px 18px 12px;
}

.aktionsmenue-blatt .aktionsmenue-label {
	padding: 10px 18px 2px;
}

.aktionsmenue-blatt .aktionsmenue-kacheln {
	padding: 10px 14px 6px;
	gap: 8px;
}

.aktionsmenue-blatt .aktionsmenue-kachel {
	padding: 12px 2px 9px;
	border-radius: 10px;
	font-size: 0.74rem;
	gap: 6px;
}

.aktionsmenue-blatt .aktionsmenue-kachel i {
	font-size: 1.15rem;
}

.aktionsmenue-blatt .aktionsmenue-menu .dropdown-item.aktionsmenue-eintrag {
	min-height: 48px;
	padding: 0 18px;
	gap: 14px;
	font-size: 1rem;
}

/* kein Doppelklick auf Touch */
.aktionsmenue-blatt .aktionsmenue-hinweis {
	display: none;
}

.aktionsmenue-blatt-abbrechen {
	display: block;
	width: calc(100% - 28px);
	height: 44px;
	margin: 10px 14px 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--tp-hover-leise);
	color: var(--tp-titel);
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.aktionsmenue-blatt,
	.aktionsmenue-blatt-hg {
		transition: none;
	}
}

/* Zelle in der DataTable: Kebab ohne zusätzliche Zeilenhöhe */
.table td.aktionsmenue-zelle {
	padding-top: 2px;
	padding-bottom: 2px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Accordion
---------------------------------------------------------------------------------------------------------------------------------- */
.accordion .card:not(:last-child) {
	margin-bottom: 0.5rem;
}

.accordion .card-header {
	border-bottom: 0;
}

.accordion .card-body {
	border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion .card-title a {
	color: var(--tp-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Formulare
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Buttons
---------------------------------------------------------------------------------------------------------------------------------- */
.btn-default {
	color: var(--tp-titel);
	background-color: var(--tp-flaeche);
	border-color: var(--tp-rand);
}
.btn-default:focus {
	color: var(--tp-titel);
	background-color: var(--tp-flaeche-3);
	border-color: #8c8c8c;
}
.btn-default:hover {
	color: var(--tp-titel);
	background-color: var(--tp-flaeche-3);
	border-color: var(--tp-rand);
}
.btn-default:active {
	color: var(--tp-titel);
	background-color: var(--tp-flaeche-3);
	border-color: var(--tp-rand);
}

.btn-app {
	border-radius: 3px;
	background-color: var(--tp-flaeche-2);
	border: 1px solid var(--tp-rand);
	color: var(--tp-text-leise);
	font-size: 12px;
	height: 60px;
	min-width: 80px;
	padding: 15px 5px;
	position: relative;
	text-align: center;
}

.btn-app > .fa,
.btn-app > .fas,
.btn-app > .far,
.btn-app > .fab,
.btn-app > .fal,
.btn-app > .fad {
	display: block;
	font-size: 20px;
}

.btn-app:hover {
	background-color: var(--tp-flaeche-2);
	border-color: var(--tp-text-blasser);
	color: var(--tp-text);
}

.btn-app:active,
.btn-app:focus {
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-app > .badge {
	font-size: 10px;
	font-weight: 400;
	position: absolute;
	right: -10px;
	top: -3px;
}

.btn-group-xs > .btn,
.btn-xs {
	padding: 0.25rem 0.4rem;
	font-size: 0.875rem;
	line-height: 0.5;
	border-radius: 0.2rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Toolbars
---------------------------------------------------------------------------------------------------------------------------------- */
.dashboard-toolbar {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 3px;
}

.card-toolbar button span.text,
.toolbar button span.text {
	padding-left: 5px;
}

.card-toolbar .dropdown-header {
	padding: 0.5rem 1rem 0rem 1rem;
	font-style: italic;
}

.tab-content .toolbar {
	padding-bottom: 10px;
}

/* -----------------------------------------------------------------------------------------------------------------
  Toolbar mit Zusatzangabe :: eine Kleinigkeit zum Zustand der Liste (z.B. "letzter Import: ...") steht neben den
  Schaltflaechen statt in einer eigenen Meldungszeile darueber. Die Angabe gehoert zu der Schaltflaeche, die sie
  veraendert, und kostet so keine eigene Zeile ueber der Liste.
----------------------------------------------------------------------------------------------------------------- */
.toolbar.toolbar-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.2rem 0.8rem;
}

/* margin-left:auto schiebt die Angabe ans rechte Ende der Leiste - die Schaltflaechen
   bleiben links, die Randnotiz steht dort, wo sie niemandem im Weg ist. */
.toolbar .toolbar-info {
	margin-left: auto;
	padding: 0.2rem 0.55rem;
	border-radius: 0.25rem;
	background: var(--bs-secondary-bg, var(--tp-flaeche-3));
	font-size: 0.8rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
	font-variant-numeric: tabular-nums;
}

.toolbar .toolbar-info b {
	font-weight: 600;
	color: var(--bs-body-color, var(--tp-titel));
}

.toolbar .toolbar-info:empty {
	display: none;
}

.tab-content .toolbar .fas {
	padding-right: 5px;
}

.modal-toolbar .fas {
	padding-right: 5px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. DropZone - only Button (small)
---------------------------------------------------------------------------------------------------------------------------------- */
.dropzone {
	padding: 0px;
	min-height: 0px !important;
	border: 1px solid var(--tp-feld-rand);
}

.dropzone .dz-message {
	font-weight: 200;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.dropzone .dz-button {
	min-width: 50px;
}

.dropzone .dz-button i {
	font-size: 12px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. CRM :: Dokumenten-Management
---------------------------------------------------------------------------------------------------------------------------------- */

.dokumenten-management .list-group-item {
	padding: 5px 10px;
}
.dokumenten-management .list-group a {
	color: var(--tp-akzent-text);
}
.dokumenten-management .list-group .active a {
	color: white;
}
.dokumenten-management .list-group a.active {
	color: white;
}
.dokumenten-management .list-group-item {
	cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. avatar
---------------------------------------------------------------------------------------------------------------------------------- */
.avatar {
	height: 40px;
	width: 40px;
}

.avatar-title {
	align-items: center;
	color: #fff;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Cursors
---------------------------------------------------------------------------------------------------------------------------------- */
.cursor-grab {
	cursor: move;
	cursor: grab;
	cursor: -webkit-grab;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Seite :: Login, Passwort vergessen, Passwort wiederherstellen, Registration
---------------------------------------------------------------------------------------------------------------------------------- */
.auth .auth-header h1 {
	font-size: 3rem;
}
.auth .auth-header h1 span {
	color: var(--tp-titel);
}

.auth .card-title {
	color: var(--tp-text-leise);
	font-size: 1.1rem;
	font-weight: normal;
	text-align: center;
	padding-top: 20px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kandidaten / Mitarbeiter
---------------------------------------------------------------------------------------------------------------------------------- */
/*
.table-alter {
	width: 100%;
	margin-top: 2px;
	margin-left: 5px;
}
.table-alter td:first-child {
	font-weight: bolder;
	width: 100px;
}
*/

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kunden
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Ansprechpartner
---------------------------------------------------------------------------------------------------------------------------------- */
.ap-email-td {
	display: inline-block;
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Mandate
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Verträge
---------------------------------------------------------------------------------------------------------------------------------- */
.vertrag-gav-td {
	display: inline-block;
	width: 225px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Einsätze
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Rapport
---------------------------------------------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. System - Benutzer
---------------------------------------------------------------------------------------------------------------------------------- */
.passwort-log {
	display: inline;
}

.passwort-kurz {
	color: var(--tp-rot-text);
}

.passwort-schwach {
	color: #ffa500;
}

.passwort-gut {
	color: var(--tp-titel);
}

.passwort-stark {
	color: #009000;
}

.passwort-boldgreen {
	font-weight: bold;
	color: green;
}

.passwort-minimum span {
	display: none;
	padding-left: 10px;
	color: green;
}

.passwort-grossundklein span {
	display: none;
	padding-left: 10px;
	color: green;
}

.passwort-buchstabenundzahlen span {
	display: none;
	padding-left: 10px;
	color: green;
}

.passwort-sonderzeichen span {
	display: none;
	padding-left: 10px;
	color: green;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. App.alert - Toast
---------------------------------------------------------------------------------------------------------------------------------- */
#toast-container > .toast,
/* zentrierte Positionen (App.ajaxFehler: top-center) haben in toastr.css eine spezifischere 300px-Regel */
#toast-container.toast-top-center > .toast,
#toast-container.toast-bottom-center > .toast {
	width: 500px;
	/* Handy: Container haengt mit 12px am Rand (toastr.css), sonst laeuft die Meldung links raus */
	max-width: calc(100vw - 24px);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Seiten :: Kandidaten / Kunden / Mandate / Rapporte
---------------------------------------------------------------------------------------------------------------------------------- */

/* Formular */
.adressen,
.telefonie,
.email,
.ausbildung,
.wichtige-informationen,
.referenzen,
.anstellung,
.kinder,
.lohn,
.arbeitsaufwand {
	position: relative;
}

.adressen legend,
.telefonie legend,
.email legend,
.ausbildung legend,
.wichtige-informationen legend,
.referenzen legend,
.anstellung legend,
.kinder legend,
.lohn legend {
	position: relative;
}

fieldset {
	border: 1px solid var(--bg-template-01);
	background-color: var(--bg-template-04);
	margin: 0rem 0rem 0.5rem 0rem;
	/*padding-bottom: 15px;*/
}

fieldset.abgerechnet {
	border: 1px solid red !important;
}

legend .legend-title {
	padding-right: 7px;
}

/* Nummer neben dem Namen in der Legende (Mitarbeiter-Stammdaten) */
legend .legend-nr {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

.fieldset-footer {
	position: absolute;
	bottom: -10px;
	right: 10px;
	padding: 0px 5px;
	background-color: var(--bg-template-04);
}

.fieldset-footer span {
	padding-left: 4px;
}

.fieldset-footer a {
	color: var(--tp-text);
}

/* Fieldset auf-/zuklappen (Schaltknopf .fieldset-toggle in der Legende, Zustand je Benutzer - siehe App.toggleFieldset)
   Zugeklappt bleibt nur die Legende stehen; !important, weil Kinder wie .d-flex ihr display selbst
   mit !important setzen. Der "mehr"-Fuss (.fieldset-footer) ist absolut positioniert und geht mit. */
fieldset.is-collapsed > :not(legend) {
	display: none !important;
}

fieldset.is-collapsed {
	padding-bottom: 0;
}

/* Details-Bereich eines Fieldsets mit Drei-Zustands-Schalter (FieldsetState::toggleButton($key, true), z.B. Lohn-Setup
   BVG / KTG / Bankverbindung): erst sichtbar, wenn das Fieldset auf "voll" steht. Ersetzt den frueheren "mehr"-Fuss
   mit Bootstrap-Collapse. Ein .d-none (z.B. Anstellungs-Historie ohne Daten) gewinnt weiterhin per !important.
   .mit-werten (JS, z.B. Lohn > Einstellungen BVG/KTG): Details mit erfassten Werten schon in "offen" sichtbar. */
fieldset .fieldset-details {
	display: none;
}

fieldset.is-expanded .fieldset-details,
fieldset .fieldset-details.mit-werten {
	display: block;
}

/* Fieldsets als Card  */
.fieldset-cards fieldset {
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	margin: 0 0 0.5rem 0;
	padding: 0 0.6rem 0.6rem 0.6rem;
}

/* Kopfzeile Variante B (12.10.2026, Mockup "Card-Kopfzeile"): Titel als Ueberschrift in normaler Schrift (vorher 0.72rem
   Kapitaelchen - zu klein), Knoepfe 30 px statt 22 px. Optional im Titel: Symbol (.legend-icon) und Zaehler (.legend-count);
   betonte Hauptaktion: .btn-haupt. Die festen Hoehen von Segment, Umschalter, Auswahl und Suche sind mitgezogen (28 px).
   22.10.2026 kompakter: Kopfhoehe wie der Reiterkopf (tabs.css, ~37 px), vorher 44 px. */
.fieldset-cards legend {
	float: left;
	display: flex;
	align-items: center;
	gap: 2px; /* Knoepfe eng wie in einer btn-group - Abstand zu Titel/Untertitel ueber deren margin-right */
	width: calc(100% + 1.2rem);
	min-height: 37px;
	margin: 0 -0.6rem 0.55rem -0.6rem;
	padding: 0.125rem 0.4rem 0.125rem 0.75rem;
	background-color: var(--bg-template-03);
	border-bottom: 1px solid var(--tp-rand-leise);
	border-radius: calc(0.2rem - 1px) calc(0.2rem - 1px) 0 0;
	color: var(--tp-akzent-text);
	font-size: 0.96rem; /* 22.10.2026, vorher 1.02rem */
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

/* Symbol vor dem Titel (optional): <span class="legend-title"><i class="fas fa-… legend-icon"></i>Titel</span> */
.fieldset-cards legend .legend-icon {
	margin-right: 0.5rem;
	color: var(--tp-link);
	font-size: 0.92em;
}

/* Inhalt unter die Kopfzeile - Bloecke wuerden sonst den Float ueberlagern */
.fieldset-cards legend ~ * {
	clear: left;
}

/* Erste Formularzeile naeher an die Kopfzeile (13.10.2026): .form-label-xs ist inline-block und erbt die Zeilenbox der
   Spalte (~24 px) - ueber dem 0.7rem-Label standen so ~10 px Leerraum zusaetzlich zum Legend-Abstand. Als Block faellt
   die Zeilenbox weg. Nur in der ersten Zeile und dort fuer alle Labels (auch verschachtelte Rows), damit die Spalten
   buendig bleiben (siehe Kennzeichen-Leiste: d-block nie mit inline-block-Labels in derselben Zeile mischen). */
.fieldset-cards legend ~ div.row:first-of-type .form-label-xs {
	display: block;
}

.fieldset-cards legend .legend-title {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 0;
	margin-right: 0.4rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Weitere Texte in der Kopfzeile (z.B. Untertitel "RAV / Job-Room" bei Mandate -> Stellenmeldepflicht): Luft zu den Knoepfen */
.fieldset-cards legend > span:not(.legend-title) {
	margin-right: 0.4rem;
}

.fieldset-cards legend .legend-nr {
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Schaltknoepfe nach rechts; Legenden ohne .legend-title (nackter Text) schieben den ersten Knopf per auto-Rand */
.fieldset-cards legend > .btn,
.fieldset-cards legend > .btn-group {
	order: 2;
}

.fieldset-cards legend > .btn:first-child,
.fieldset-cards legend > .btn-group:first-child {
	margin-left: auto;
}

/* Knoepfe nur als Symbol, ohne Rahmen - der Rahmen kommt erst beim Zeigen; inline-flex zentriert das Symbol
   senkrecht - als inline-block sass es mit line-height 1 am oberen Rand. gap: Flex verschluckt das Leerzeichen
   zwischen Symbol und Beschriftung ("+ Hinzufuegen", "Haken Speichern") - ohne gap klebt der Text am Symbol. */
.fieldset-cards legend .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	height: 30px;
	min-width: 30px;
	padding: 0 0.45rem;
	border-color: transparent;
	border-radius: 0.25rem;
	background-color: transparent;
	box-shadow: none;
	color: var(--tp-text-leise);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

/* Symbol neben einer Beschriftung etwas kleiner: das Glyph fuellt das ganze Geviert, Kleinbuchstaben nur die x-Hoehe -
   in gleicher Groesse wirkt das Symbol zu gross und zu hoch. Reine Symbol-Knoepfe (Chevron der FieldsetState-Schalter)
   tragen fa-fw und behalten ihre Groesse. */
.fieldset-cards legend .btn .fas:not(.fa-fw) {
	font-size: 0.875em;
}

.fieldset-cards legend .btn:hover,
.fieldset-cards legend .btn:focus-visible,
.fieldset-cards legend .btn.show {
	border-color: transparent;
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

/* Text-Knoepfe in der Legende (Ansprechpartner -> Adressen: Abbrechen / Speichern im Bearbeiten-Modus): Speichern behaelt seine Farbe */
.fieldset-cards legend .btn.btn-outline-primary {
	color: var(--tp-link);
}

.fieldset-cards legend .btn.btn-outline-primary:hover {
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
}

/* Hauptaktion der Karte (Leistungserfassung: Neu) - gefuellt in der Primaerfarbe, zeigt, wo es losgeht. Sparsam: eine je Karte. */
.fieldset-cards legend .btn.btn-haupt,
.fieldset-cards legend .btn.btn-haupt:focus-visible {
	border-color: var(--tp-primaer);
	background-color: var(--tp-primaer);
	color: #fff;
}

.fieldset-cards legend .btn.btn-haupt:hover {
	border-color: rgb(var(--tp-primaer-hover-rgb));
	background-color: rgb(var(--tp-primaer-hover-rgb));
	color: #fff;
}

.fieldset-cards legend .btn-group {
	gap: 2px;
}

.fieldset-cards legend .btn-group > .btn {
	margin-left: 0;
	border-radius: 0.2rem;
}

/* Segment-Schalter in der Kopfzeile (Kunden-/Ansprechpartner-Typ, App.typSchalter): die Knoepfe behalten eine leichte Kontur,
   damit das Segment als Gruppe lesbar bleibt; der aktive Knopf traegt .btn-kachel und ueberstimmt die Ghost-Regel oben */
.fieldset-cards legend .typ-segment {
	margin-right: 0.4rem;
}

.fieldset-cards legend .typ-segment .btn {
	border-color: var(--tp-feld-rand);
	background-color: var(--tp-flaeche);
}

.fieldset-cards legend .typ-segment .btn.btn-kachel,
.fieldset-cards legend .typ-segment .btn.btn-kachel:hover {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
}

/* Webvorschau (Berufswunsch): nur das Symbol, der Text steht im title */
.fieldset-cards legend .btn .titel {
	display: none;
}

/* Aufklappmenues am Plus (Sprachen, Ausbildung) erben sonst Kapitaelchen und Laufweite der Kopfzeile */
.fieldset-cards legend .dropdown-menu {
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
}

/* Kopfzeilen mit Ein-/Aus-Schaltern (Aufgabe bearbeiten, Leistungserfassung - Mockup Variante D, 15.09.2026)
   Ein gesetzter btn-check wird in der Kopfzeile nicht zur dunklen Bootstrap-Vollflaeche, sondern zur Kachel im
   Kennzeichen-Blau (Privat / btn-outline-danger: rote Kachel wie die "inaktiv"-Kachel). Gilt fuer alle Card-Kopfzeilen. */
.fieldset-cards legend .btn-check:checked + .btn,
.fieldset-cards legend .btn-check:checked + .btn:hover {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
}

.fieldset-cards legend .btn-check:checked + .btn.btn-outline-danger,
.fieldset-cards legend .btn-check:checked + .btn.btn-outline-danger:hover {
	background-color: var(--tp-rot-bg);
	border-color: var(--tp-rot-rand);
	color: var(--tp-rot-text);
}

.fieldset-cards legend .btn-check:focus-visible + .btn {
	box-shadow: 0 0 0 2px var(--tp-fokus);
}

/* Klapp-Schalter in der Kopfzeile (Mitarbeiter -> Personalien: Zemis): Bootstrap Collapse pflegt aria-expanded am Knopf -
   offen = Kachel wie ein gesetzter btn-check, damit der Zustand ohne Blick in den Kartenkoerper lesbar ist.
   Nur beschriftete Schalter (.mit-titel) - reine Chevron-Knoepfe (Rapporte -> Diagramm) bleiben Ghost */
.fieldset-cards
	legend
	.btn.mit-titel[data-bs-toggle="collapse"][aria-expanded="true"],
.fieldset-cards
	legend
	.btn.mit-titel[data-bs-toggle="collapse"][aria-expanded="true"]:hover {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
}

/* Trennstrich zwischen den Gruppen einer Kopfzeile (Ansicht | Eigenschaften | Aktionen) - ueberstimmt den
   Standard-Rand fuer Texte in der Kopfzeile (span:not(.legend-title)) */
.fieldset-cards legend > span.legend-sep {
	order: 2;
	flex: none;
	width: 1px;
	height: 18px;
	margin: 0 0.35rem;
	background-color: var(--tp-feld-rand);
}

/* Beschriftete Schalter (Mockup Variante C, 15.09.2026): Symbol + kurzer Text, damit die Kopfzeile ohne Tooltip lesbar ist.
   Ungesetzt grau wie die Symbol-Knoepfe, gesetzt = Kachel (Regel oben) mit etwas mehr Gewicht. Auch fuer Aktions-Knoepfe
   mit Text (Leistungserfassung: Neu / Start / Stop). */
.fieldset-cards legend .btn.mit-titel {
	padding: 0 0.5rem 0 0.4rem;
}

.fieldset-cards legend .btn.mit-titel .titel {
	display: inline;
	padding-left: 5px;
	font-size: 0.88rem;
}

.fieldset-cards legend .btn-check:checked + .btn.mit-titel {
	font-weight: 500;
}

/* Kopfzeilen mit vielen Schaltern (Aufgabe bearbeiten, Leistungserfassung) duerfen auf schmalen Bildschirmen umbrechen */
.fieldset-cards legend.toolbar {
	flex-wrap: wrap;
	row-gap: 4px;
}

/* Start / Stop: echte Aktionen behalten ihre Signalfarbe - Umschalter (label) bleiben bis zum Setzen grau */
.fieldset-cards legend button.btn.btn-outline-success {
	color: var(--tp-gruen);
}

.fieldset-cards legend button.btn.btn-outline-success:hover {
	background-color: var(--tp-gruen-bg);
	color: var(--tp-gruen-text);
}

.fieldset-cards legend button.btn.btn-outline-danger {
	color: var(--tp-rot-dunkel);
}

.fieldset-cards legend button.btn.btn-outline-danger:hover {
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

.fieldset-cards fieldset.is-collapsed {
	padding-bottom: 0;
}

.fieldset-cards fieldset.is-collapsed > legend {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: calc(0.2rem - 1px);
}

/* "mehr"-Fuss sitzt auf der unteren Rahmenlinie - Grund jetzt weiss statt #fafafa */
.fieldset-cards .fieldset-footer {
	background-color: var(--tp-flaeche);
}

/* Innere Tabs (Berufswunsch): auf weissem Grund braucht der Reiter-Inhalt einen Rahmen statt nur Schatten */
.fieldset-cards fieldset .tab .nav-tabs .nav-link {
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 0.2rem 0.2rem 0 0;
	margin-bottom: -1px;
}

.fieldset-cards fieldset .tab .nav-tabs .nav-link.active {
	border-color: var(--tp-rand-leise);
}

.fieldset-cards fieldset .tab .tab-content {
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0 0.2rem 0.2rem 0.2rem;
	box-shadow: none;
}

/* Kontakt-Listen (Adressen / Telefonie / E-Mail, *_v2): Textteil einer Zeile neben der Schaltflaechen-Gruppe.
   Der Text darf umbrechen statt abgeschnitten zu werden (.text-truncate machte aus "+41 79 510 73 78" ein "+41 79 51…").
   min-width: 0 hebt die automatische Mindestbreite des Flex-Kindes auf, overflow-wrap bricht auch lange Woerter
   (E-Mail-Adressen) um, statt die Zeile ueber das Fieldset hinaus zu schieben. */
.kontakt-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Zeilen der Kontakt-Listen (Adressen / Telefonie / E-Mail v2): 
   Das Symbol VOR dem Eintrag ist die Hauptaktion
   (Pin = Google Maps, Hoerer = Anrufen, Umschlag = Mail) in der Farbe einer gesetzten Kennzeichen-Kachel; rechts steht nur
   ein leiser Drei-Punkte-Knopf mit Bearbeiten / Loeschen (.btn-edit-mode, im Ansichtsmodus versteckt). Keine Knopfreihe
   mehr, die mit den Formularfeldern konkurriert - die Zeile hat Texthoehe. */
.kontakt-lead {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.8rem;
	text-decoration: none;
	cursor: pointer;
}

.kontakt-lead:hover,
.kontakt-lead:focus-visible {
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-kachel-hover);
	color: var(--tp-kachel-text-hover);
}

.btn.kontakt-kebab {
	width: 22px;
	height: 22px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: transparent;
	border-radius: 0.2rem;
	background-color: transparent;
	color: var(--tp-text-blass);
	font-size: 0.8rem;
	line-height: 1;
}

.btn.kontakt-kebab:hover,
.btn.kontakt-kebab:focus,
.btn.kontakt-kebab.show {
	border-color: transparent;
	background-color: var(--tp-hover-leise);
	color: var(--tp-titel);
}

/* Telefonie + E-Mail nebeneinander, sobald beide Fieldsets ihre Zeilen einzeilig zeigen koennen - sonst untereinander.
   flex-basis: max-content nimmt die breiteste Zeile als Sollbreite; passt die Summe nicht in die Spalte, rutscht E-Mail
   unter Telefonie (flex-wrap). Der Umbruch haengt damit am Inhalt und an der Spaltenbreite, nicht am Viewport:
   Bootstraps col-xxl-6 schaltete erst unter 1400px um, die Stammdaten-Spalte ist aber schon bei 1536px nur ~450px breit.
   min-width: 0 laesst ein allein stehendes Fieldset unter seine Sollbreite schrumpfen (lange E-Mail-Adresse bricht
   dann per .kontakt-text um). Die Fieldsets bringen ihren Abstand nach unten selbst mit, daher nur column-gap. */
.kontakt-spalten {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.25rem;
}

.kontakt-spalten > * {
	flex: 1 1 max-content;
	min-width: 0;
}

/* Leerzustand eines Fieldsets ("Keine Adressen erfasst."): eine dezente Zeile auf leicht grauem Grund statt einer
   Alert-Box. Gleiche Optik in allen Bereichen (Wichtige Informationen, Berufswunsch, Kontakt-Listen, Sprachen, IT,
   Ausbildung) - der Grauton liegt bewusst etwas unter der Kopfzeile (--bg-template-03), damit er nicht damit konkurriert. */
.leer-hinweis {
	padding: 0.3rem 0.55rem;
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-leise);
	font-size: 0.875em;
}

/* Dokument-Upload in der Kopfzeile (Variante B, Mockup 12.09.2026, Dokumente::legendeUploadGruppe):
   Upload-Knopf + Bueroklammer mit Zaehler in der Legende, die Card selbst ist Ablageflaeche - die Dropzone haengt
   am fieldset (MA_Dokumente.createDropZone), der Knopf ist nur das Klickziel. Gruppe steht vor Plus/Toggle. */
.fieldset-cards legend .dokumente-gruppe {
	margin-right: 4px;
}

.fieldset-cards legend .legend-count,
.fieldset-cards .la-pflicht-gruppe-titel .legend-count {
	display: inline-block;
	min-width: 14px;
	height: 14px;
	margin-left: 3px;
	padding: 0 4px;
	border-radius: 7px;
	background-color: var(--tp-tint);
	color: var(--tp-legende-text);
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.fieldset-cards legend .legend-count:empty,
.fieldset-cards .la-pflicht-gruppe-titel .legend-count:empty {
	display: none;
}

.fieldset-cards legend .btn.show .legend-count {
	background-color: var(--tp-flaeche);
}

/* Zaehler direkt am Kartentitel (Alimente, Kinder, Lohnarten-Dialog "Pflichtigkeit"): Kachel-Pille wie .bw-zaehler in den
   Berufswunsch-Abschnitten (mitarbeiter_style.php) - eigener Rand, damit sie auf dem Legenden-Grund nicht untergeht.
   Dieselbe Pille traegt der Dokument-Zaehler neben der Bueroklammer (.dokumente-gruppe, seit 22.09.2026 Kunden > Bonitaet). */
.fieldset-cards legend .legend-title .legend-count,
.fieldset-cards legend .dokumente-gruppe .legend-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	margin-left: 0.5rem;
	padding: 0 7px;
	border-radius: 20px;
	font-size: 0.74rem;
	font-weight: 500;
	background-color: var(--tp-kachel-bg);
	border: 1px solid var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	line-height: 1;
	vertical-align: middle;
	text-transform: none;
}

.fieldset-cards legend .legend-title .legend-count:empty,
.fieldset-cards legend .dokumente-gruppe .legend-count:empty {
	display: none;
}

/* laufender Upload: das Symbol wird per JS zum Spinner */
.fieldset-cards legend .dokumente-upload.dz-laeuft {
	color: var(--tp-link);
}

/* Ablageflaeche: Dropzone setzt dz-drag-hover, solange eine Datei ueber der Card schwebt; der Hinweistext
   kommt aus data-ablage-hinweis ("Ablegen: Referenzen") und liegt ueber dem Inhalt unterhalb der Kopfzeile */
.fieldset-cards fieldset.dokumente-ablage {
	position: relative;
}

.fieldset-cards fieldset.dz-drag-hover {
	outline: 2px dashed var(--tp-primaer);
	outline-offset: -2px;
	background-color: var(--tp-kachel-bg);
}

.fieldset-cards fieldset.dz-drag-hover::after {
	content: attr(data-ablage-hinweis);
	position: absolute;
	inset: 30px 0 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(234, 242, 253, 0.88);
	color: var(--tp-link);
	font-size: 0.9rem;
	font-weight: 600;
	pointer-events: none;
	border-radius: 0 0 0.2rem 0.2rem;
}

/* Dokumentliste im Aufklappmenue (Stil L2): Name klein, darunter Ablagedatum und Pruefvermerk */
.dokumente-liste {
	min-width: 250px;
	font-size: 0.8rem;
}

.dokumente-liste .dropdown-item {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	padding: 0.25rem 0.7rem;
	white-space: normal;
}

.dokumente-liste .dropdown-item > .fas {
	margin-top: 3px;
	color: var(--tp-text-leise);
	font-size: 0.75rem;
}

.dokumente-liste .dokument-text {
	display: flex;
	flex: 1 1 auto; /* volle Zeilenbreite, damit "geprueft" rechts anschlagen kann */
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.dokumente-liste .dokument-name {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dokumente-liste .dokument-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.68rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

/* Pruefvermerk rechtsbuendig */
.dokumente-liste .dokument-ok {
	margin-left: auto;
	color: var(--tp-gruen);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Bereiche verwalten (FieldsetLayout) :: Zonen und Spalten einer Maske
   - .fs-spalte (col-xxl-6) und die Zonen oben/unten sind Flex-Wrap-Container: ein Block mit
     data-fs-breite="halb" nimmt die halbe Spalte, zwei halbe stehen nebeneinander, ein einzelner
     halber fuellt die Spalte (Nachfolger von .kontakt-spalten bei Telefonie / E-Mail)
   - Zonen oben/unten (volle Breite) sind ohne Bloecke unsichtbar; die Ablage "aus" bleibt im DOM
     (die Partials und ihr JS erwarten ihre Elemente), wird aber nie angezeigt
------------------------------------------------------------------ */
.fs-spalte,
.fs-zone.fs-zone-has {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.25rem;
	align-content: flex-start;
}

.fs-zone {
	display: none;
}

.fs-zone-aus {
	display: none !important;
}

.fs-spalte > *,
.fs-zone > * {
	flex: 1 1 100%;
	min-width: 0;
}

.fs-spalte > .fs-block[data-fs-breite="halb"] {
	flex: 1 1 calc(50% - 0.25rem);
}

.fs-block {
	min-width: 0;
}

/* Fenster «Bereiche verwalten» (cms/js/fieldset_layout.js) */
.fsl-scope {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	background-color: var(--tp-grund);
	border-bottom: 1px solid var(--tp-rand-leise);
	font-size: 0.85rem;
}

.fsl-scope-label {
	color: var(--tp-text-leise);
	white-space: nowrap;
}

.fsl-scope .btn.active {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
}

.fsl-benutzer {
	width: auto;
	min-width: 220px;
}

.fsl-scope-hint {
	color: var(--tp-text-blass);
	font-size: 0.78rem;
}

.fsl-map {
	display: grid;
	/* minmax(0, 1fr) statt 1fr: 1fr heisst minmax(auto, 1fr), und "auto" laesst eine Spalte
       auf die Mindestbreite ihres Inhalts wachsen - zwei halbe Bereiche nebeneinander plus
       ein langer Untertitel machten die linke Spalte doppelt so breit wie die rechte.
       Mit 0 als Minimum sind beide exakt gleich breit, der Inhalt kuerzt sich (Ellipse). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.75rem;
}

.fsl-map .fsl-full {
	grid-column: 1 / -1;
}

.fsl-tray {
	margin-top: 0.25rem;
}

.fsl-zh {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 0.3rem 0.2rem;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tp-text-blass);
}

.fsl-zh span {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.72rem;
}

.fsl-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-content: flex-start;
	position: relative;
	min-height: 46px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background-color: var(--tp-grund);
	border: 1px dashed var(--tp-kachel-border);
	border-radius: 0.25rem;
}

.fsl-tray .fsl-list {
	background-color: var(--tp-flaeche-2);
	border-color: var(--tp-feld-rand);
	min-height: 42px;
}

.fsl-list:empty::before {
	content: attr(data-empty);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	font-size: 0.78rem;
	color: var(--tp-text-blass);
	text-align: center;
}

.fsl-item {
	flex: 1 1 100%;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	min-height: 34px;
	padding: 0.2rem 0.35rem 0.2rem 0.5rem;
	background-color: var(--tp-flaeche);
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	font-size: 0.86rem;
	color: var(--tp-legende-text);
}

.fsl-list[data-fsl-zone="l"] .fsl-item.fsl-halb,
.fsl-list[data-fsl-zone="r"] .fsl-item.fsl-halb {
	flex: 1 1 calc(50% - 4px);
}

.fsl-item.fsl-fixed {
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-blass);
}

.fsl-item.fsl-inaktiv {
	border-style: dashed;
	color: var(--tp-text-blass);
}

.fsl-item.sortable-ghost {
	opacity: 0.35;
}

.fsl-item.sortable-chosen {
	box-shadow: 0 0 0 2px rgba(var(--tp-primaer-rgb), 0.35);
}

.fsl-grip,
.fsl-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 22px;
	margin-left: -0.2rem;
	border-radius: 0.2rem;
	flex: 0 0 auto;
	color: #9aa7bd;
}

.fsl-grip {
	cursor: grab;
}

.fsl-grip:hover {
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

.fsl-lock {
	color: var(--tp-text-blasser);
}

.fsl-name {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.2;
}

.fsl-name .fsl-titel {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.fsl-name .fsl-sub {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--tp-text-blass);
}

.fsl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
	height: 18px;
	padding: 0 0.4rem;
	border-radius: 0.2rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.fsl-badge-zf {
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
}

.fsl-badge-fb {
	background-color: var(--tp-hover-leise);
	color: var(--tp-text-leise);
}

.fsl-badge-off {
	background-color: var(--tp-gelb-bg);
	color: var(--tp-gelb-text);
}

.fsl-breite {
	flex: 0 0 auto;
	height: 24px;
	padding: 0 0.3rem;
	font-size: 0.78rem;
	color: var(--tp-text);
	background-color: var(--tp-flaeche);
	border: 1px solid var(--tp-feld-rand);
	border-radius: 0.2rem;
}

.fsl-wfix {
	flex: 0 0 auto;
	font-size: 0.72rem;
	color: var(--tp-text-blass);
	white-space: nowrap;
}

.fsl-item .btn-group {
	flex: 0 0 auto;
}

.fsl-item .btn {
	height: 22px;
	min-width: 22px;
	padding: 0 0.3rem;
	border-color: transparent;
	background-color: transparent;
	color: var(--tp-text-leise);
	border-radius: 0.2rem;
	line-height: 1;
}

.fsl-item .btn:hover {
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

.fsl-panel-titel {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--tp-titel);
}

.fsl-keyline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 31px;
	font-size: 0.85rem;
}

.fsl-felder {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 31px;
	font-size: 0.88rem;
}

.fsl-info {
	font-size: 0.82rem;
}

.fsl-users {
	max-height: 220px;
	overflow: auto;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.25rem;
	background-color: var(--tp-flaeche);
}

.fsl-users .form-check {
	margin-bottom: 0.15rem;
}

.fsl-modus {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fsl-modus-opt {
	display: block;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.25rem;
	font-size: 0.86rem;
	cursor: pointer;
}

.fsl-modus-opt:has(input:checked) {
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-kachel-bg);
}

.fsl-modus-opt span {
	display: block;
	margin-left: 1.35rem;
	font-size: 0.76rem;
	color: var(--tp-text-leise);
}

.fsl-footer .fsl-footer-hint {
	font-size: 0.78rem;
	color: var(--tp-text-blass);
	margin-left: 0.5rem;
}

/* Standard-Menue: zweizeilige Eintraege (Titel + Erklaerung, laden vs. sofort loeschen) */
#fslStandardMenu {
	min-width: 320px;
}

#fslStandardMenu .dropdown-item {
	white-space: normal;
}

.fsl-std-hint {
	display: block;
	margin-left: 1.6rem;
	font-size: 0.74rem;
	line-height: 1.3;
	color: var(--tp-text-blass);
}

@media (max-width: 800px) {
	.fsl-map {
		grid-template-columns: 1fr;
	}
}

/* Feld-Beschriftungen */
label {
	font-size: 0.85rem;
}

/* Tabs */
fieldset .tab {
	margin-bottom: 0rem;
}

/* Tabellen */
.table {
	margin-bottom: 0px;
}

/* Flexbox :: Ausbildung / Wichtige Informationen */
.fieldset-flexbox {
	display: flex;
}

.fieldset-flexbox .flexbox-main {
	flex: 1;
}

.fieldset-flexbox .flexbox-toolbar {
	flex: 0 25px;
}

/* Fix :: DropDown oberhalb des Toolbars 14.02.2024 (Mitarbeiter / Kunden => rechts oben Einstellungen */
.flexbox-toolbar .btn-group {
	position: static;
}

.flexbox-toolbar .btn-group > .btn {
	position: static;
}

fieldset .input-group {
	position: static;
}

fieldset .input-group > .form-control {
	position: static !important;
}

/* Kleine Labels bei Formularen */
.form-label-xs {
	margin-bottom: 0.1rem;
	font-size: 0.7rem;
	line-height: 1;
	color: var(--tp-text-leise);
	font-weight: 500;
}

/* Kennzeichen-Leiste :: Ja-Nein-Merkmale als Kacheln (statt Schalter) */
.kennzeichen-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.kennzeichen-leiste .kz {
	position: relative;
	margin-bottom: 0;
	cursor: pointer;
}

.kennzeichen-leiste .kz input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.kennzeichen-leiste .kz-body {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 31px;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	color: var(--tp-text-blasser);
	font-size: 0.78rem;
	line-height: 1;
	white-space: nowrap;
	transition:
		background-color 0.12s,
		border-color 0.12s,
		color 0.12s;
}

.kennzeichen-leiste .kz:hover .kz-body {
	border-color: var(--tp-feld-rand);
}

/* Zusatz in der Kachel (z.B. "Offerten - Dossierversand, Tel. & Kurzprofil" im Profil): leiser als der Titel */
.kennzeichen-leiste .kz-body .kz-sub {
	font-weight: 400;
	opacity: 0.7;
}

/* trifft zu */
.kennzeichen-leiste .kz input:checked ~ .kz-body {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
}

.kennzeichen-leiste .kz input:focus-visible ~ .kz-body {
	outline: 2px solid var(--tp-primaer);
	outline-offset: 2px;
}

/* gesperrt (Ansichtsmodus: Maske setzt disabled auf alle Inputs, z.B. Mandate) :: blass und ohne Hand-Cursor */
.kennzeichen-leiste .kz:has(input:disabled) {
	cursor: default;
}

.kennzeichen-leiste .kz input:disabled ~ .kz-body,
.kennzeichen-leiste .kz:has(input:disabled):hover .kz-body {
	opacity: 0.6;
	border-color: var(--tp-rand-leise);
}

/* Status inaktiv :: nicht nur blass, sondern rot - der Zustand ist wichtig */
.kennzeichen-leiste .kz-aus .kz-body,
.kennzeichen-leiste .kz-aus:hover .kz-body {
	background-color: var(--tp-rot-bg);
	border-color: var(--tp-rot-rand);
	color: var(--tp-rot-text);
	font-weight: 500;
}

/* Knopf in der Farbe einer gesetzten Kennzeichen-Kachel (.kz-body bei input:checked) - fuer Umschalter, die neben den
   Kacheln stehen, z.B. Kunden-/Ansprechpartner-Typ (App.typSchalter). Bootstrap-Button-Variablen wie bei .btn-primary. */
.btn-kachel {
	--bs-btn-color: var(--tp-kachel-text);
	--bs-btn-bg: var(--tp-kachel-bg);
	--bs-btn-border-color: var(--tp-kachel-border);
	--bs-btn-hover-color: var(--tp-kachel-text-hover);
	--bs-btn-hover-bg: var(--tp-kachel-hover);
	--bs-btn-hover-border-color: var(--tp-kachel-border-hover);
	--bs-btn-active-color: var(--tp-kachel-text-hover);
	--bs-btn-active-bg: var(--tp-kachel-aktiv);
	--bs-btn-active-border-color: var(--tp-kachel-border-hover);
	--bs-btn-focus-shadow-rgb: var(--tp-primaer-rgb);
	--bs-btn-disabled-color: color-mix(in srgb, var(--tp-kachel-text) 55%, #fff);
	--bs-btn-disabled-bg: color-mix(in srgb, var(--tp-primaer) 5%, #fff);
	--bs-btn-disabled-border-color: color-mix(
		in srgb,
		var(--tp-primaer) 18%,
		#fff
	);
	font-weight: 500;
}

/* Buttons */
.button-action {
	color: var(--tp-text-leise);
}

.button-action:hover {
	color: var(--tp-titel);
}

.nav-item .card-actions i {
	color: var(--tp-titel);
}

.nav-item .card-actions i:hover {
	color: var(--tp-akzent-text);
}

/* Adresse */
.adresse-recordset {
	padding-top: 10px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Header breadcrumb :: Bootstrap-Anpassung
---------------------------------------------------------------------------------------------------------------------------------- */
.breadcrumb {
	margin-bottom: 0px;
}
.breadcrumb .breadcrumb-item.active a {
	color: white;
	font-weight: bolder;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. AJAX-Loader :: Spinning / Rotating
---------------------------------------------------------------------------------------------------------------------------------- */

.ui-blocker {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(255, 255, 255, 0.5);
	/* halbtransparent */
	z-index: 9999;
	/* über allem */
	cursor: not-allowed;
}

.AjaxLoading {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -125px 0px 0px -125px;
	z-index: 2000;

	border: 16px solid var(--bg-template-03);
	border-radius: 50%;
	border-top: 16px solid var(--bg-template-01);
	border-bottom: 16px solid var(--bg-template-01);

	/*
    border-right: 16px solid red;
    border-bottom: 16px solid green;
    border-left: 16px solid yellow;
	*/

	width: 125px;
	height: 125px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. jQueryUI - AutoComplete Erweiterungen
---------------------------------------------------------------------------------------------------------------------------------- */

/* Autocomplete-Menü über dem Bootstrap-Modal */
.ui-autocomplete {
	z-index: 2000 !important;
	max-height: 300px;

	/* Nur vertikal scrollen, horizontal verhindern */
	overflow-y: auto;
	overflow-x: hidden;

	/* Always reserve the scrollbar gutter. If the scrollbar only shows up once
       the list overflows, the content gets narrower, entries wrap, the list
       grows taller and needs the scrollbar again - which flickers. */
	scrollbar-gutter: stable;

	background: var(--tp-flaeche);
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	white-space: normal; /* Zeilenumbruch erlauben */
}

.ui-autocomplete {
	min-width: 350px;
}
.ui-menu .ui-menu-item {
	min-width: 350px;
}

/* Trennlinie nur zwischen den Listeneinträgen */
.ui-menu .ui-menu-item {
	border-top: 1px solid rgba(0, 0, 0, 0.035);
}

/* obersten Eintrag ohne Linie */
.ui-menu .ui-menu-item:first-child {
	border-top: none;
}

/* Einträge */
.ui-menu .ui-menu-item-wrapper {
	padding: 0.375rem 0.75rem;
	line-height: 1.25;
	cursor: pointer;
	white-space: normal; /* ebenfalls sicherstellen */
}

/* Active-Markierung (sichtbar!)
   No :hover rule here on purpose. jQuery UI selects the item that carries
   ui-state-active, not the one under the cursor. Both usually match, but when
   the menu scrolls (max-height above) the widget deliberately keeps the active
   item while the list moves under the mouse - a :hover rule would then light up
   a second entry and the click would pick the other one. */
.ui-menu .ui-menu-item-wrapper.ui-state-active {
	background-color: var(--bg-template-01);
	color: #fff;

	/* jQuery UI applies margin: -1px here to hide doubled borders. Our entries
       have no border, so all it does is make the active row 2px shorter - which
       is enough to toggle the scrollbar at the edge of the 300px list. Reset it
       so the row height stays constant no matter which entry is active. */
	margin: 0;
}

/* Optionale feine Trennlinien */
/*
.ui-menu .ui-menu-item+.ui-menu-item .ui-menu-item-wrapper {
	border-top: 1px solid rgba(0, 0, 0, .035);
}
*/

/* jQuery UI :: AutoComplete für Kategorien */
.ui-autocomplete-category {
	margin-top: 5px;
	padding: 2px 3px;
	font-weight: bolder;
	font-style: italic;
	color: var(--tp-text-leise);
	font-size: 13px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. daterangepicker (plugins/daterangepicker) :: Template-Farben
  Das Plugin bringt feste Farben mit (weiss, #eee, #357ebd, arial). Hier auf die Token gezogen, damit Farbvorlage und
  Dunkelmodus mitziehen - dunkel.css braucht dafuer keinen eigenen Eintrag.
  Wochenende: das Plugin haengt an Sa/So die Klasse .weekend - dieselbe wie in der Jahresuebersicht, deren globale
  Regel (!important, --jahresuebersicht-grau-01, Abschnitt "Abwesenheits-/Rapport-Statusfarben") sonst in den Kalender durchschlaegt:
  hell grauer Tag mit weisser Schrift, wenn "heute" auf ein Wochenende faellt, dunkel helle Spalten. Deshalb hier
  ebenfalls mit !important, und Auswahl / Bereich / Hover am Wochenende ausdruecklich wieder obenauf.
---------------------------------------------------------------------------------------------------------------------------------- */
.daterangepicker {
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	background-color: var(--tp-flaeche);
	border-color: var(--tp-rand);
	color: var(--tp-text);
	box-shadow: 0 0.5rem 1rem var(--tp-schatten);
}

.daterangepicker:before {
	border-bottom-color: var(--tp-rand);
}

.daterangepicker:after {
	border-bottom-color: var(--tp-flaeche);
}

.daterangepicker.drop-up:before {
	border-top-color: var(--tp-rand);
}

.daterangepicker.drop-up:after {
	border-top-color: var(--tp-flaeche);
}

.daterangepicker .calendar-table {
	background-color: var(--tp-flaeche);
	border-color: var(--tp-flaeche);
}

.daterangepicker .calendar-table th {
	color: var(--tp-titel);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
	border-color: var(--tp-text);
}

.daterangepicker td.week,
.daterangepicker th.week {
	color: var(--tp-text-blasser);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
	background-color: var(--tp-flaeche);
	border-color: transparent;
	color: var(--tp-text-blass);
}

.daterangepicker td.in-range {
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
	background-color: var(--tp-primaer);
	color: #fff;
}

.daterangepicker td.disabled,
.daterangepicker option.disabled,
.daterangepicker .calendar-time select.disabled {
	color: var(--tp-text-blasser);
}

/* Wochenende (Sa/So) - leise hinterlegt (hell ~#f2f4f5 wie bisher, dunkel eine Stufe ueber der Flaeche), Zustaende bleiben
   sichtbar (s. Kopf) */
.daterangepicker td.weekend {
	background-color: color-mix(
		in srgb,
		var(--tp-flaeche-3) 60%,
		var(--tp-flaeche)
	) !important;
}

.daterangepicker td.weekend.off {
	background-color: var(--tp-flaeche) !important;
}

.daterangepicker td.weekend.available:hover {
	background-color: var(--tp-hover) !important;
}

.daterangepicker td.weekend.in-range {
	background-color: var(--tp-kachel-bg) !important;
}

.daterangepicker td.weekend.active,
.daterangepicker td.weekend.active:hover {
	background-color: var(--tp-primaer) !important;
}

/* Monat/Jahr, Stunde/Minute: wie Eingabefelder */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
	background-color: var(--tp-feld);
	border: 1px solid var(--tp-feld-rand);
	border-radius: 4px;
	color: var(--tp-text);
}

.daterangepicker .drp-buttons,
.daterangepicker.show-ranges.single.rtl .drp-calendar.left,
.daterangepicker.show-ranges.single.ltr .drp-calendar.left,
.daterangepicker.show-ranges.rtl .drp-calendar.right,
.daterangepicker.show-ranges.ltr .drp-calendar.left {
	border-color: var(--tp-rand);
}

.daterangepicker .drp-selected {
	color: var(--tp-text);
}

.daterangepicker .ranges li:hover {
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

.daterangepicker .ranges li.active {
	background-color: var(--tp-primaer);
	color: #fff;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. modales Fenster :: Journal / Aufgaben
---------------------------------------------------------------------------------------------------------------------------------- */

.divJournal_Beziehungen,
.divAufgaben_Verantwortliche,
.divAufgaben_Beziehungen {
	margin-top: 15px;
	padding: 5px;
	border: 1px solid var(--tp-feld-rand);
	display: none;
}

.divJournal_Beziehungen ul,
.divAufgaben_Verantwortliche ul,
.divAufgaben_Beziehungen ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.divJournal_Beziehungen li,
.divAufgaben_Verantwortliche li,
.divAufgaben_Beziehungen li {
	margin-top: 4px;
	margin-right: 4px;
	padding: 1px 5px;
	float: left;
	/*background-color: var(--bg-template-01);*/
	background-color: rgba(var(--tp-akzent-rgb), 1);
	transition: all 0.1s ease-in-out;
	color: #fff;
	border: 1px solid var(--tp-text);
	border-radius: 5px;
}

.divJournal_Beziehungen li:hover,
.divAufgaben_Verantwortliche li:hover,
.divAufgaben_Beziehungen li:hover {
	background-color: rgba(var(--tp-akzent-rgb), 0.8);
	transition: all 0.1s ease-in-out;
}

.divJournal_Beziehungen li a,
.divAufgaben_Verantwortliche li a,
.divAufgaben_Beziehungen li a {
	color: #fafafa;
}

.divJournal_Beziehungen li .kz,
.divAufgaben_Verantwortliche li .kz,
.divAufgaben_Beziehungen li .kz {
	margin-right: 5px;
	font-weight: bolder;
}

.divJournal_Beziehungen li .delete,
.divAufgaben_Verantwortliche li .delete,
.divAufgaben_Beziehungen li .delete {
	margin-left: 5px;
}

.divJournal_Beziehungen li a.delete:hover,
.divAufgaben_Verantwortliche li a.delete:hover,
.divAufgaben_Beziehungen li a.delete:hover {
	color: red;
	transition: all 0.1s ease-in-out;
}

.divJournal_Beziehungen li a:active,
.divJournal_Beziehungen li a:focus,
.divAufgaben_Verantwortliche li a:active,
.divAufgaben_Verantwortliche li a:focus,
.divAufgaben_Beziehungen li a:active,
.divAufgaben_Beziehungen li a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

.crm_journal_beziehungen ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.crm_journal_beziehungen ul li {
	margin-top: 4px;
	margin-right: 4px;
	padding: 1px 5px;
	float: left;
	background-color: rgba(var(--tp-akzent-rgb), 1);
	transition: all 0.1s ease-in-out;
	color: #fff;
	border: 1px solid var(--tp-text);
	border-radius: 3px;

	/* Kürzen nach 100px */
	display: inline-block;
	max-width: 125px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-size: 0.75rem;
}

.crm_journal_beziehungen ul li:hover {
	background-color: rgba(var(--tp-akzent-rgb), 0.8);
	transition: all 0.1s ease-in-out;
}

/*
.crm_journal_beziehungen ul li.Mitarbeiter {
	background-color: rgba(139, 0, 0, 0.8);
	border: 1px solid var(--tp-rot-text);
}

.crm_journal_beziehungen ul li.Mitarbeiter:hover {
	background-color: rgba(139, 0, 0, 1);
}

.crm_journal_beziehungen ul li.Kunden {
	background-color: rgba(0, 100, 0, 0.8);
	border: 1px solid #015001;
}

.crm_journal_beziehungen ul li.Kunden:hover {
	background-color: rgba(0, 100, 0, 1);
}
*/

.crm_journal_beziehungen ul li a {
	color: #fafafa;
}

.crm_journal_beziehungen ul li .kz {
	margin-right: 5px;
	font-weight: bolder;
}

.crm_journal_beziehungen ul li .element {
	/* */
}

.crm_journal_beziehungen ul li a:active,
.crm_journal_beziehungen ul li a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

/*
.journal-beziehungen {
	margin: 0px;
	padding-left: 15px;
}
*/

/*
jQueryPlugin Beziehungen :: 16.02.2024
*/

.beziehungen-container > label {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
}

.beziehungen-container .liste {
	padding: 5px;
	border: 1px solid var(--tp-feld-rand);
	display: none;
}

.beziehungen-container .liste ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.beziehungen-container .liste li {
	padding: 2px 6px 2px 6px;
	background-color: rgba(var(--tp-akzent-rgb), 1);
	transition: background-color 0.1s ease-in-out;
	color: #fff;
	border: none;
	border-radius: 6px;
	display: flex;
	align-items: center;
	font-size: 0.8rem;
}
.beziehungen-container .liste li:hover {
	background-color: rgba(var(--tp-akzent-rgb), 0.75);
}

/*
Abweichende Formatierung von Mitabeiter & Kunden
.beziehungen-container .liste li.Mitarbeiter {
	background-color: rgba(139, 0, 0, 0.8);
	border: 1px solid var(--tp-rot-text);
}
.beziehungen-container .liste li.Mitarbeiter:hover {
	background-color: rgba(139, 0, 0, 1);
}
.beziehungen-container .liste li.Kunden {
	background-color: rgba(0, 100, 0, 0.8);
	border: 1px solid #015001;
}
.beziehungen-container .liste li.Kunden:hover {
	background-color: rgba(0, 100, 0, 1);
}
*/

.beziehungen-container .liste li a {
	color: #fafafa;
}

.beziehungen-container .liste li .kz {
	margin-right: 4px;
	font-weight: normal;
	opacity: 0.7;
}

.beziehungen-container .liste li .element {
	display: inline-block;
	max-width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*border: 1px solid red;*/

	flex-grow: 1; /* Takes up the remaining horizontal space */
}

.beziehungen-container .liste li .delete {
	margin-left: 6px;
	opacity: 0.6;
	font-size: 0.75rem;
}

.beziehungen-container .liste li a.delete:hover {
	color: #ffaaaa;
	opacity: 1;
	transition: all 0.1s ease-in-out;
}

.beziehungen-container .liste li a:active,
.beziehungen-container .liste li a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}

.crm_links ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.crm_links ul li {
	margin-top: 4px;
	margin-right: 4px;
	padding: 1px 5px;
	float: left;
	background-color: rgba(var(--tp-akzent-rgb), 1);
	transition: all 0.1s ease-in-out;
	color: #fff;
	border: 1px solid var(--tp-text);
	border-radius: 3px;

	/* Kürzen nach 100px */
	display: inline-block;
	max-width: 125px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-size: 0.75rem;
}

.crm_links ul li:hover {
	background-color: rgba(var(--tp-akzent-rgb), 0.8);
	transition: all 0.1s ease-in-out;
}

.crm_links ul li a {
	color: #fafafa;
}

.crm_links ul li .kz {
	margin-right: 5px;
	font-weight: bolder;
}

.crm_links ul li .element {
	/* */
}

.crm_links ul li a:active,
.crm_links ul li a:focus {
	outline: 0;
	border: none;
	-moz-outline-style: none;
}
/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Berufe Skills
---------------------------------------------------------------------------------------------------------------------------------- */

.skills-container ul {
	list-style-type: none;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 0px !important;
}

.skills-container ul li {
	margin-bottom: 3px;
}

.skills-container ul li button.btn-outline-secondary:hover {
	background-color: var(--tp-rot);
	border-color: var(--tp-rot);
}

.skills-container ul li button:hover i {
	color: white;
}

.skills-container .hard-skill {
	background-color: rgba(207, 226, 255, 0.5);
}

.skills-container .soft-skill {
	background-color: rgba(173, 248, 2, 0.2);
}

/* Compact-Badge-Modus */
.skills-container .badge.hard-skill,
.skills-container .badge.soft-skill {
	font-size: 0.8em;
}

.skills-container .badge.hard-skill {
	background-color: transparent !important;
	color: var(--tp-titel);
	border: 1px solid rgba(150, 195, 255, 1);
}

.skills-container .badge.soft-skill {
	background-color: transparent !important;
	color: var(--tp-titel);
	border: 1px solid rgba(120, 180, 0, 0.7);
}

.skills-toolbar button span.text {
	padding-left: 5px;
}

.skills-container .alert {
	margin-bottom: 0px !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Alignments
---------------------------------------------------------------------------------------------------------------------------------- */

.horizontal-tb {
	writing-mode: horizontal-tb;
}

.vertical-rl {
	writing-mode: vertical-rl;
}

.vertical-lr {
	writing-mode: vertical-lr;
}

.sideways-lr {
	writing-mode: sideways-lr;
}

.sideways-rl {
	writing-mode: sideways-rl;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Benutzer & Gruppen :: Berechtigungen
---------------------------------------------------------------------------------------------------------------------------------- */
.berechtigungen_liste ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

.berechtigungen_liste ul li {
	margin-top: 4px;
	margin-right: 4px;
	padding: 1px 5px;
	float: left;
	background-color: rgba(139, 0, 0, 0.8);
	border: 1px solid var(--tp-rot-text);
	transition: all 0.1s ease-in-out;
	color: #fff;
	border-radius: 3px;

	/* Kürzen nach 100px */
	/*
	display: inline-block;
	max-width: 125px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	*/

	font-size: 0.75rem;
}

.berechtigungen_liste ul li:hover {
	background-color: rgba(139, 0, 0, 1);
	transition: all 0.1s ease-in-out;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Rechtsklick- / Kontextmenü > DataTables, FullCalendar, etc.
---------------------------------------------------------------------------------------------------------------------------------- */

.cms-contextMenu {
	display: none;
	position: absolute;
	z-index: 1000;
}

.cms-contextMenu ul {
	list-style: none;
	margin: 0;
	padding: 5px;
}

.cms-contextMenu ul li {
	padding: 6px 12px;
	cursor: pointer;
}

.cms-contextMenu ul li:hover {
	background: var(--tp-flaeche-2);
}

.cms-contextMenu .list-group-item.danger {
	color: var(--tp-rot);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. fimaBtnToggleSwitch & fimaMultiStateToggleButton
---------------------------------------------------------------------------------------------------------------------------------- */

/* Nur innerhalb der Toggle-Komponente */
.btn-toggle-switch-wrapper {
	position: relative;
	display: inline-block;
	height: 32px;
	/*margin-bottom: 1rem;*/
}

/* Versteckt nur Checkboxen innerhalb der Komponente */
.btn-toggle-switch-wrapper input[type="checkbox"] {
	display: none;
}

/* Stil für den sichtbaren Toggle-Button */
.btn-toggle-switch-wrapper .btn-toggle-slider {
	border-radius: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.75rem;
	transition: all 0.3s ease;
	cursor: pointer;
	user-select: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Pflichtfelder 21.10.2025
---------------------------------------------------------------------------------------------------------------------------------- */
/* ========= PRIO: Farb-Variablen (Vorschlag 3: kontraststark) ========= */
:root {
	--prio-1: #d32f2f;
	/* Rot – kritisch */
	--prio-2: #f57c00;
	/* Orange – wichtig */
	--prio-3: #ffca28;
	/* Gelb – nice-to-have */
	--prio-fg-dark: #212529;
	--prio-fg-light: #fff;
}

/* ========= Badges ========= */
.bg-prio-1 {
	background: var(--prio-1);
	color: var(--prio-fg-light);
}

.bg-prio-2 {
	background: var(--prio-2);
	color: var(--prio-fg-light);
}

/* Gelb braucht dunklere Schrift für Kontrast */
.bg-prio-3 {
	background: var(--prio-3);
	/*color: var(--prio-fg-dark);*/
	color: var(--prio-fg-light);
}

/* === Bootstrap-Table-Varianten: .table-prio-1/2/3 === */
/* Anwendung: <tr class="table-prio-1"> oder <tbody class="table-prio-2"> */

.table-prio-1 {
	--bs-table-color: var(--prio-fg-dark);
	--bs-table-bg: rgba(211, 47, 47, 0.08);
	--bs-table-border-color: rgba(211, 47, 47, 0.25);
	--bs-table-striped-bg: rgba(211, 47, 47, 0.16);
	--bs-table-striped-color: var(--prio-fg-dark);
	--bs-table-active-bg: rgba(211, 47, 47, 0.2);
	--bs-table-active-color: var(--prio-fg-dark);
	--bs-table-hover-bg: rgba(211, 47, 47, 0.12);
	--bs-table-hover-color: var(--prio-fg-dark);
	color: var(--bs-table-color);
	border-color: var(--bs-table-border-color);
}

.table-prio-2 {
	--bs-table-color: var(--prio-fg-dark);
	--bs-table-bg: rgba(245, 124, 0, 0.08);
	--bs-table-border-color: rgba(245, 124, 0, 0.25);
	--bs-table-striped-bg: rgba(245, 124, 0, 0.16);
	--bs-table-striped-color: var(--prio-fg-dark);
	--bs-table-active-bg: rgba(245, 124, 0, 0.2);
	--bs-table-active-color: var(--prio-fg-dark);
	--bs-table-hover-bg: rgba(245, 124, 0, 0.12);
	--bs-table-hover-color: var(--prio-fg-dark);
	color: var(--bs-table-color);
	border-color: var(--bs-table-border-color);
}

.table-prio-3 {
	/* Gelb = dunklere Schrift für Kontrast */
	--bs-table-color: var(--prio-fg-dark);
	--bs-table-bg: rgba(255, 202, 40, 0.14);
	--bs-table-border-color: rgba(255, 202, 40, 0.3);
	--bs-table-striped-bg: rgba(255, 202, 40, 0.22);
	--bs-table-striped-color: var(--prio-fg-dark);
	--bs-table-active-bg: rgba(255, 202, 40, 0.28);
	--bs-table-active-color: var(--prio-fg-dark);
	--bs-table-hover-bg: rgba(255, 202, 40, 0.2);
	--bs-table-hover-color: var(--prio-fg-dark);
	color: var(--bs-table-color);
	border-color: var(--bs-table-border-color);
}

/* ========= Hintergrundfarben für .form-control.form-prio-* ========= */
/* funktioniert mit input, textarea, select, egal ob .form-control-sm etc. */

/* === P1: Rot (kritisch) === */
.form-control.form-prio-1,
.form-select.form-prio-1 {
	border-color: var(--prio-1);
	background-color: rgba(211, 47, 47, 0.05); /* leicht rötlich */
}
.form-control.form-prio-1:focus,
.form-select.form-prio-1:focus {
	background-color: rgba(211, 47, 47, 0.08);
	border-color: var(--prio-1);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--prio-1) 25%, transparent);
}

/* === P2: Orange (wichtig) === */
.form-control.form-prio-2,
.form-select.form-prio-2 {
	border-color: var(--prio-2);
	background-color: rgba(245, 124, 0, 0.05); /* leicht orange */
}
.form-control.form-prio-2:focus,
.form-select.form-prio-2:focus {
	background-color: rgba(245, 124, 0, 0.08);
	border-color: var(--prio-2);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--prio-2) 25%, transparent);
}

/* === P3: Gelb (nice-to-have) === */
.form-control.form-prio-3,
.form-select.form-prio-3 {
	border-color: var(--prio-3);
	background-color: rgba(
		255,
		202,
		40,
		0.1
	); /* etwas sichtbarer, da hellere Farbe */
	color: var(--prio-fg-dark);
}
.form-control.form-prio-3:focus,
.form-select.form-prio-3:focus {
	background-color: rgba(255, 202, 40, 0.15);
	border-color: var(--prio-3);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--prio-3) 30%, transparent);
}

/* === Hover: etwas intensiver === */
.form-control.form-prio-1:hover,
.form-select.form-prio-1:hover {
	background-color: rgba(211, 47, 47, 0.07);
}

.form-control.form-prio-2:hover,
.form-select.form-prio-2:hover {
	background-color: rgba(245, 124, 0, 0.07);
}

.form-control.form-prio-3:hover,
.form-select.form-prio-3:hover {
	background-color: rgba(255, 202, 40, 0.12);
}

/* === Disabled / Readonly: etwas ausgegraut === */
.form-control.form-prio-1:disabled,
.form-select.form-prio-1:disabled {
	background-color: rgba(211, 47, 47, 0.03);
	border-color: rgba(211, 47, 47, 0.25);
	opacity: 0.65;
}
.form-control.form-prio-2:disabled,
.form-select.form-prio-2:disabled {
	background-color: rgba(245, 124, 0, 0.03);
	border-color: rgba(245, 124, 0, 0.25);
	opacity: 0.65;
}
.form-control.form-prio-3:disabled,
.form-select.form-prio-3:disabled {
	background-color: rgba(255, 202, 40, 0.08);
	border-color: rgba(255, 202, 40, 0.3);
	opacity: 0.65;
}

/* Nur tbody scrollen */
.pflichtfelder-table tbody {
	display: block;
	max-height: 350px;
	/* Scrollhöhe */
	overflow-y: auto;
	overflow-x: hidden;
}

/* Header + Body-Zeilen als Tabellenzeilen darstellen */
.pflichtfelder-table thead,
.pflichtfelder-table tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
	/* gleiche Spaltenbreiten */
}

/* Konsistente Spaltenbreiten (1: flexibel, 2: 180px, 3: 100px) */
.pflichtfelder-table thead th:nth-child(1),
.pflichtfelder-table tbody td:nth-child(1) {
	width: auto;
}

.pflichtfelder-table thead th:nth-child(2),
.pflichtfelder-table tbody td:nth-child(2) {
	width: 180px;
}

.pflichtfelder-table thead th:nth-child(3),
.pflichtfelder-table tbody td:nth-child(3) {
	width: 100px;
}

/* Optional: Box-Sizing hilft bei Pixelgenauigkeit */
.pflichtfelder-table th,
.pflichtfelder-table td {
	box-sizing: border-box;
}

.pflichtfelder-export-output {
	display: none;
	margin-top: 12px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Small-Box
---------------------------------------------------------------------------------------------------------------------------------- */
.small-box {
	border-radius: 0.25rem;
	box-shadow:
		0 0 1px rgba(0, 0, 0, 0.125),
		0 1px 3px rgba(0, 0, 0, 0.2);
	display: block;
	margin-bottom: 20px;
	position: relative;
	color: white;
	overflow: hidden;
}

.small-box > .inner {
	padding: 10px;
}

.small-box > .small-box-footer {
	background-color: rgba(0, 0, 0, 0.1);
	color: rgba(255, 255, 255, 0.8);
	display: block;
	padding: 3px 0;
	position: relative;
	text-align: center;
	text-decoration: none;
	z-index: 10;
}

.small-box > .small-box-footer:hover {
	background-color: rgba(0, 0, 0, 0.15);
	color: #fff;
}

.small-box h3 {
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.small-box p {
	font-size: 1rem;
	margin: 0;
}

.small-box > .inner h3,
.small-box > .inner p {
	color: white;
}

.small-box .icon {
	color: rgba(0, 0, 0, 0.15);
}

.small-box .icon i {
	font-size: 70px;
	position: absolute;
	right: 15px;
	top: 20px;
	transition: transform 0.3s linear;
}

.small-box:hover .icon i {
	transform: scale(1.1);
}

.bg-info {
	background-color: #17a2b8;
}

.bg-success {
	background-color: var(--tp-gruen-hell);
}

.bg-warning {
	background-color: var(--tp-gelb);
}

.bg-danger {
	background-color: var(--tp-rot);
}

@media (max-width: 767.98px) {
	.small-box {
		text-align: center;
	}

	.small-box .icon {
		display: none;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Telefonie 21.03.2026
---------------------------------------------------------------------------------------------------------------------------------- */
.create-call {
	cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Diverses
---------------------------------------------------------------------------------------------------------------------------------- */
/* Verhindern von Text-Auswahl */
.no-select {
	user-select: none; /* Standard property */
	-webkit-user-select: none; /* For Safari */
	-ms-user-select: none; /* For IE/Edge */
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kompaktes Dropdown-Menü
---------------------------------------------------------------------------------------------------------------------------------- */
.dropdown-menu-compact {
	font-size: 0.8rem;
	min-width: 0;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.dropdown-menu-compact .dropdown-item {
	padding: 0.25rem 0.5rem;
}

.dropdown-menu-compact .dropdown-divider {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Bearbeiten-Karten - Aktionen im Kartenkopf (Aufgabe bearbeiten, CRM-Journal)
---------------------------------------------------------------------------------------------------------------------------------- */

/* Karte mit class="card-bearbeiten" (Variante B "Zustand sichtbar", Mockup 19.09.2026; seit 20.09.2026 gemeinsam fuer
   #cardAufgabeEdit und #cardJournal, vorher in aufgaben.css). Schliessen|Verwerfen, Speichern (+ Pfeil-Menue) und
   Drei-Punkte-Menue stehen rechts im Kartenkopf. Zustand ueber .ist-geaendert an der Karte (Aufgaben.setGeaendert /
   CRM_Journal.setGeaendert): ohne Aenderungen zeigen sich die .nur-gespeichert-Elemente, mit Aenderungen die .nur-geaendert.

   Der Kopf klebte beim Scrollen oben (position: sticky + Schatten ueber App.initKopfAngeheftet/.ist-angeheftet);
   auf Wunsch 22.09.2026 ist das fuer beide Masken wieder entfernt - der Kopf scrollt mit dem Inhalt weg. Wer es
   zurueckholen will, findet Regeln und Helfer in der Historie (Stand 21.09.2026). */

.card-bearbeiten .card-header .card-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Sachbearbeiter, Nummer und Zustand leise hinter dem Titel */
.card-bearbeiten .card-header .card-title .sachbearbeiter,
.card-bearbeiten .card-header .card-title .kopf-zustand {
	margin-left: 0.75rem;
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--tp-text-leise);
	white-space: nowrap;
}

.card-bearbeiten .card-header .card-title .kopf-nummer {
	font-variant-numeric: tabular-nums;
	color: var(--tp-text-leise);
}

/* Aufgaben-Nr. hinter dem Titel wie die Kunden-Nr. in der Legende: "Betreff (Aufgaben-Nr. 123)" */
.card-bearbeiten .card-header .card-title .aufgaben-nr {
	font-size: 0.82rem;
	font-weight: 400;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Nummer als leiser Zusatz hinter dem Titel: "CRM-Eintrag bearbeiten – 2026-000418" */
.card-bearbeiten .card-header .card-title .kopf-nummer:not(:empty)::before {
	content: "\2013\00a0";
}

.card-bearbeiten .card-header .card-title .kopf-zustand.geaendert {
	color: var(--tp-orange-text);
}

.card-bearbeiten .card-header .card-title .kopf-zustand .punkt {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 2px;
	border-radius: 50%;
	background-color: var(--tp-orange);
	vertical-align: 1px;
}

/* Text nur dann vom Symbol abruecken, wenn ein Symbol davor steht (Schliessen/Verwerfen haben keines) */
.card-bearbeiten .card-header .card-actions .btn > .fas + .titel {
	padding-left: 5px;
}

/* Zustands-Umschaltung: .nur-geaendert nur mit, .nur-gespeichert nur ohne Aenderungen (Knoepfe UND Beschriftungen) */
.card-bearbeiten .nur-geaendert,
.card-bearbeiten.ist-geaendert .nur-gespeichert {
	display: none;
}

.card-bearbeiten.ist-geaendert .nur-geaendert {
	display: revert;
}

/* Leise Knoepfe (Schliessen/Verwerfen, Drei-Punkte): Rahmen erst beim Zeigen - wie der Kebab in den Listen */
.card-bearbeiten .card-header .btn-kopf-leise {
	border-color: transparent;
	background-color: transparent;
	color: var(--tp-text-leise);
}

.card-bearbeiten .card-header .btn-kopf-leise:hover,
.card-bearbeiten .card-header .btn-kopf-leise:focus-visible,
.card-bearbeiten .card-header .btn-kopf-leise.show {
	border-color: transparent;
	background-color: var(--tp-hover);
	color: var(--tp-text);
}

.card-bearbeiten .card-header .btn-verwerfen:hover,
.card-bearbeiten .card-header .btn-verwerfen:focus-visible {
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

.card-bearbeiten .card-header .btn-kopf-menue {
	padding-left: 0.55rem;
	padding-right: 0.55rem;
}

/* Ohne Aenderungen wird "Speichern" zum leisen "Gespeichert" mit gruenem Haken - bleibt klickbar */
.card-bearbeiten:not(.ist-geaendert) .card-header .btn-speichern {
	background-color: transparent;
	border-color: var(--tp-rand);
	color: var(--tp-text-leise);
}

.card-bearbeiten:not(.ist-geaendert) .card-header .btn-speichern .fa-check {
	color: var(--tp-gruen);
}

.card-bearbeiten:not(.ist-geaendert) .card-header .btn-speichern:hover,
.card-bearbeiten:not(.ist-geaendert) .card-header .btn-speichern:focus-visible,
.card-bearbeiten:not(.ist-geaendert) .card-header .btn-speichern.show {
	background-color: var(--tp-hover-leise);
	border-color: var(--tp-rand);
	color: var(--tp-text);
}

/* Tastenkuerzel rechts im Pfeil-Menue */
.card-bearbeiten .card-header .dropdown-menu .dropdown-item {
	display: flex;
	align-items: center;
}

.card-bearbeiten .card-header .dropdown-menu .tastenkuerzel {
	margin-left: auto;
	padding-left: 0.75rem;
	font-size: 0.7rem;
	color: var(--tp-text-blass);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. System-Einstellungen - Kalender, etc.
---------------------------------------------------------------------------------------------------------------------------------- */
.color-block {
	margin-right: 5px;
}

.bg-color-01 {
	color: #cfe2ff;
}

.bg-color-02 {
	color: #d1e7dd;
}

.bg-color-03 {
	color: #cff4fc;
}

.bg-color-04 {
	color: #fff3cd;
}

.bg-color-05 {
	color: #f8d7da;
}

.bg-color-06 {
	color: #f8f9fa;
}

.fg-color-01 {
	color: var(--tp-titel);
}

.fg-color-02 {
	color: #ffffff;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. CRM-Dokumente :: Nextcloud
---------------------------------------------------------------------------------------------------------------------------------- */
.nc-wrap {
	font-size: 14px;
}

.nc-wrap .ok {
	color: var(--tp-gruen-text);
}

.nc-wrap .bad {
	color: var(--tp-rot-text);
}

/* Fehlermeldungen im Datei-Browser (renderAlert) - .alert ist im Theme flex mit padding:0 */
.nc-wrap .nc-alert {
	align-items: stretch;
	font-size: 14px;
}

.nc-wrap .nc-alert .alert-icon {
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.05);
	border-top-left-radius: 0.2rem;
	border-bottom-left-radius: 0.2rem;
}

.nc-wrap .nc-alert .alert-message {
	display: flex;
	align-items: center;
}

.nc-wrap table.ls {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 4px;
}

.nc-wrap table.ls th,
.nc-wrap table.ls td {
	padding: 5px 8px;
	text-align: left;
	border-bottom: 1px solid var(--tp-rand-leise);
	vertical-align: middle;
}

.nc-wrap table.ls th {
	background: var(--tp-flaeche-2);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Ordner-/Dateilinks in der Name-Spalte */
.nc-wrap table.ls td:first-child a {
	color: var(--tp-kachel-text-hover);
}

.nc-wrap table.ls tbody tr:hover {
	background: var(--tp-flaeche-2);
}

.nc-wrap table.ls td.act {
	white-space: nowrap;
}

.nc-wrap .nc-version-menu {
	min-width: 360px;
	padding: 0.35rem;
}

.nc-wrap .nc-version-table-wrap {
	max-height: 260px;
	overflow: auto;
}

.nc-wrap .nc-version-table {
	font-size: 12px;
}

.nc-wrap .nc-version-table th,
.nc-wrap .nc-version-table td {
	vertical-align: middle;
	white-space: nowrap;
}

.nc-wrap .nc-icon-word {
	color: var(--tp-kachel-text-hover);
}

.nc-wrap .nc-icon-excel {
	color: var(--tp-gruen-text);
}

.nc-wrap .nc-icon-powerpoint {
	color: var(--tp-rot-text);
}

.nc-wrap .nc-icon-pdf {
	color: var(--tp-rot-text);
}

.nc-wrap .nc-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	background: var(--tp-flaeche-2);
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	color: var(--tp-text-leise);
}

.nc-wrap .nc-crumb a {
	color: var(--tp-kachel-text-hover);
	text-decoration: none;
	font-weight: 500;
}

.nc-wrap .nc-crumb a:hover {
	text-decoration: underline;
}

.nc-wrap .fold {
	color: var(--tp-text-blasser);
}

.nc-wrap .nc-empty {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.85rem 1rem;
	background: var(--tp-flaeche-2);
	border: 1px dashed var(--tp-feld-rand);
	border-radius: 0.375rem;
	color: var(--tp-text-leise);
	font-weight: 500;
}

.nc-wrap .nc-loading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--tp-flaeche-2);
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.375rem;
	color: var(--tp-text-leise);
	font-weight: 500;
}

.nc-wrap .nc-audit-log {
	margin: 0;
	padding: 0.75rem 1rem;
	background: var(--tp-flaeche-2);
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.375rem;
	color: var(--tp-text-leise);
	font-size: 12px;
	max-height: 300px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Drag & Drop Handler */
.nc-drop {
	border: 2px dashed var(--tp-text-blasser);
	border-radius: 8px;
	padding: 14px;
	margin: 8px 0 16px;
	text-align: center;
	transition: 0.15s;
}

.nc-drop.over {
	border-color: var(--tp-kachel-text-hover);
	background: var(--tp-tint);
}

.nc-drop .nc-link {
	color: var(--tp-kachel-text-hover);
	cursor: pointer;
	text-decoration: underline;
}

#nc-uplstatus {
	margin-top: 6px;
	color: var(--tp-text-leise);
	font-size: 12px;
	min-height: 1em;
}

/* Abwesenheits-/Rapport-Statusfarben (frueher lokal in cms/backend_intern/rapporte/assets/jahresuebersicht.php
   auf ".jahresuebersicht" gescoped, hierher verschoben, damit dieselben Klassen/Variablen auch ausserhalb
   dieser Seite nutzbar sind, z.B. Dashboard-Widget "Abwesenheiten-Uebersicht" - EINZIGE Quelle fuer diese
   Farbwerte, jahresuebersicht.php referenziert dieselben Variablen statt eigener Literale). */
:root {
	--jahresuebersicht-gruen-01: rgba(173, 248, 2, 0.1);
	--jahresuebersicht-gruen-02: rgba(209, 231, 221, 0.75);
	--jahresuebersicht-gruen-03: rgba(0, 127, 14, 0.4);
	--jahresuebersicht-gruen-04: darkgreen;
	--jahresuebersicht-blau-01: rgba(207, 226, 255, 0.35);
	--jahresuebersicht-grau-01: rgba(226, 227, 229, 0.5);
	--jahresuebersicht-grau-01-rgb: 226, 227, 229;
	--jahresuebersicht-rot-01: rgba(248, 215, 218, 0.5);
	--jahresuebersicht-braun-01: rgba(127, 51, 0, 0.25);
	--jahresuebersicht-braun-01-rgb: 127, 51, 0;
	--jahresuebersicht-gelb-01: rgba(255, 231, 170, 0.5);
	--jahresuebersicht-gelb-01-rgb: 255, 231, 170;
	--jahresuebersicht-orange-01: rgba(253, 126, 20, 0.25);
	--jahresuebersicht-pink-01: rgba(214, 51, 132, 0.25);
	--jahresuebersicht-pink-01-rgb: 214, 51, 132;
	--jahresuebersicht-violett-01: rgba(33, 37, 205, 0.25);
	--jahresuebersicht-violett-01-rgb: 33, 37, 205;
	--jahresuebersicht-schwarz-01: rgba(33, 37, 41, 0.25);
	--jahresuebersicht-schwarz-01-rgb: 33, 37, 41;
	--jahresuebersicht-gruen-03-rgb: 0, 127, 14;
	--jahresuebersicht-orange-01-rgb: 253, 126, 20;

	/* Dashboard-Widget "Nicht abgelieferte Rapporte": eigener, kraeftigerer Rotton fuer fehlende
       Rapporte. --jahresuebersicht-rot-01 ist dort bereits fuer Unterzeit belegt und als Signal fuer
       einen komplett fehlenden Tag zu blass. */
	--rapporttag-fehlt-rgb: 220, 53, 69;
}

/* .weekend haengt auch der daterangepicker an Sa/So - dort eigene Regel, s. Abschnitt "daterangepicker" */
.weekend {
	background-color: var(--jahresuebersicht-grau-01) !important;
}

.feiertag {
	background-color: var(--jahresuebersicht-schwarz-01) !important;
}

.absenz {
	background-color: var(--jahresuebersicht-braun-01) !important;
}

.ferien {
	background-color: var(--jahresuebersicht-gelb-01) !important;
}

.krankheit {
	background-color: var(--jahresuebersicht-pink-01) !important;
}

.unfall {
	background-color: var(--jahresuebersicht-pink-01) !important;
}

.militaer {
	background-color: var(--jahresuebersicht-gruen-03) !important;
}

.rapport {
	background-color: var(--jahresuebersicht-gruen-02) !important;
}

.rapport-aus-diesem-vertrag {
	background-color: var(--jahresuebersicht-gruen-01) !important;
}

.rapport-ueberzeit {
	/*background-color: var(--jahresuebersicht-orange-01) !important;*/
	background-color: var(--jahresuebersicht-gruen-03) !important;
}

.rapport-unterzeit {
	/*background-color: var(--jahresuebersicht-orange-01) !important;*/
	background-color: var(--jahresuebersicht-rot-01) !important;
}

.unbezahlt {
	background-color: var(--jahresuebersicht-violett-01) !important;
}

/* Abgerechnet */
.abgerechnet-lohn {
	background-color: rgba(51, 102, 153, 0.2) !important;
}

.abgerechnet-rechnung {
	background-color: rgba(51, 102, 153, 0.4) !important;
}

.abgerechnet-rechnung-teilweise {
	background-color: rgba(51, 102, 153, 0.6) !important;
}

.abgerechnet-lohn-und-rechnung-teilweise {
	background-color: rgba(51, 102, 153, 0.8) !important;
}

.abgerechnet-komplett {
	background-color: rgba(51, 102, 153, 1) !important;
}

/* bezahlt/todesfall sind auch auf der Jahresuebersicht selbst nicht eingefaerbt - Fallback statt farblos,
   nur fuer das Dashboard-Widget "Abwesenheiten-Uebersicht" relevant */
.todesfall {
	background-color: var(--jahresuebersicht-schwarz-01);
}

.bezahlt,
.abwesenheitsgrund-unbekannt {
	background-color: var(--jahresuebersicht-grau-01);
}

/* Abwesenheit in der frei wählbaren Farbe ihres Grundes (Stammdaten › Abwesenheitsgründe, bg_color) - ersetzt die
   festen Klassen oben (.absenz/.ferien/... bleiben nur noch für Altbestand/Legenden). Die Farbe kommt als --abw im
   style-Attribut (Jahresübersicht-Zelle, Dashboard-Kästchen); Dunkelmodus in dunkel.css. */
.abw-farbe {
	background-color: var(--abw, var(--jahresuebersicht-grau-01)) !important;
}

.abw-farbe.abwesenheit-tag {
	border-color: color-mix(in srgb, var(--abw, #e2e3e5), #000 22%);
}

/* Dashboard-Widget "Abwesenheiten-Uebersicht": farbiges Tages-Kaestchen, kombiniert mit einer der
   obigen Statusfarben-Klassen (z.B. class="ferien abwesenheit-tag"). Rahmenfarbe wird pro Kategorie von
   derselben Farbe abgeleitet (RGB-Anteil der jeweiligen --jahresuebersicht-*-Variable, hoeherer Alpha-Wert
   als die Flaeche) statt eines allgemeinen Grautons - .abwesenheit-tag selbst liefert nur den Fallback
   (greift z.B. fuer .bezahlt/.abwesenheitsgrund-unbekannt, die ohnehin grau eingefaerbt sind). */
.abwesenheit-tag {
	display: inline-block;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(var(--jahresuebersicht-grau-01-rgb), 1);
	/*
    cursor: help;
    transition:
        transform 0.12s ease-out,
        box-shadow 0.12s ease-out;
		*/
}

.abwesenheit-tag:hover {
	/*
    transform: scale(1.25);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	*/
}

.absenz.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-braun-01-rgb), 1);
}

.ferien.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-gelb-01-rgb), 1);
}

.krankheit.abwesenheit-tag,
.unfall.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-pink-01-rgb), 1);
}

.militaer.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-gruen-03-rgb), 1);
}

.unbezahlt.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-violett-01-rgb), 1);
}

.todesfall.abwesenheit-tag {
	border-color: rgba(var(--jahresuebersicht-schwarz-01-rgb), 1);
}

/* Dashboard-Widget "Abwesenheiten-Uebersicht": senkrechte Spaltentrenner zwischen den Wochentagen und
   dezent hinterlegtes Wochenende - bei vielen Zeilen bleibt so erkennbar, zu welchem Tag ein Kaestchen
   gehoert. Wochenend-Farbe = dieselbe Variable wie .weekend in der Jahresuebersicht (keine Doppelspurigkeit). */
.abwesenheiten-woche > :not(caption) > * > *:not(:first-child) {
	border-left: 1px solid var(--bs-border-color, var(--tp-rand));
}

.abwesenheiten-woche > :not(caption) > * > *.we,
.rapport-woche > :not(caption) > * > *.we {
	background-color: var(--jahresuebersicht-grau-01);
}

/* Rapport-Streifen: kraeftigere Spaltentrenner als im Abwesenheiten-Widget - bei 31 Tages-Spalten
   ist sonst nicht mehr erkennbar, zu welchem Tag ein Kaestchen gehoert */
.rapport-woche > :not(caption) > * > *:not(:first-child) {
	border-left: 1px solid rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.18);
}

/* Wochengrenze (jeweils vor dem Montag) - in der Monatsansicht die wichtigste Orientierung */
.rapport-woche > :not(caption) > * > *.wk-start {
	border-left: 2px solid rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.42);
}

/* Trenner vor den Auswertungs-Spalten (Offen / SZ / Aktion) */
.rapport-woche > :not(caption) > * > *.spalten-trenner {
	border-left: 2px solid rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.42);
}

/* Dashboard-Widget "Nicht abgelieferte Rapporte" (cms/backend_intern/dashboard/rapporte/nicht_abgelieferte_rapporte.php):
   Tages-Kaestchen des Wochen-/Monatsstreifens. Gleiche Groesse und Form wie .abwesenheit-tag, damit
   beide Widgets dasselbe Raster zeigen - Abwesenheitstage werden im Rapport-Streifen bewusst mit den
   Klassen des Abwesenheiten-Widgets (.abwesenheit-tag + Grund-Klasse) gezeichnet, nicht nachgebaut.
   Die Farben kommen aus denselben --jahresuebersicht-*-Variablen wie die Rapporte-Jahresuebersicht. */
.rapport-tag {
	display: inline-block;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(var(--jahresuebersicht-grau-01-rgb), 1);
	background-color: var(--jahresuebersicht-grau-01);
}

/* Monatsansicht: bis zu 31 Spalten - schmalere Kaestchen, gilt auch fuer die Abwesenheitstage */
.rapport-woche.kompakt .rapport-tag,
.rapport-woche.kompakt .abwesenheit-tag {
	width: 9px;
	border-radius: 2px;
}

/* ... und entsprechend schmalere Spalten: die Kopfzeile zeigt dann nur noch die Tageszahl */
.rapport-woche.kompakt > :not(caption) > * > * {
	padding-left: 1px;
	padding-right: 1px;
}

.rapport-woche.kompakt thead th {
	font-size: 10px;
}

.rapport-woche > :not(caption) > * > * {
	vertical-align: middle;
}

/* erfasst, Sollzeit erfuellt */
.rapport-tag.rt-ok {
	background-color: var(--jahresuebersicht-gruen-02);
	border-color: rgba(var(--jahresuebersicht-gruen-03-rgb), 0.5);
}

/* erfasst, aber unter der Sollzeit */
.rapport-tag.rt-unterzeit {
	background-color: var(--jahresuebersicht-orange-01);
	border-color: rgba(var(--jahresuebersicht-orange-01-rgb), 0.7);
}

/* kein Rapport erfasst */
.rapport-tag.rt-fehlt {
	background-color: rgba(var(--rapporttag-fehlt-rgb), 0.35);
	border-color: rgba(var(--rapporttag-fehlt-rgb), 0.7);
}

/* Feiertag */
.rapport-tag.rt-feiertag {
	background-color: var(--jahresuebersicht-schwarz-01);
	border-color: rgba(var(--jahresuebersicht-schwarz-01-rgb), 0.6);
}

/* Wochenende / nicht geprueft */
.rapport-tag.rt-frei {
	background-color: var(--jahresuebersicht-grau-01);
	border-color: rgba(var(--jahresuebersicht-grau-01-rgb), 1);
}

/* Tag liegt in der Zukunft - kann noch nicht rapportiert sein */
.rapport-tag.rt-offen {
	background-color: transparent;
	border-style: dashed;
	border-color: rgba(var(--jahresuebersicht-grau-01-rgb), 1);
}

/* ausserhalb der Einsatz-Periode */
.rapport-tag.rt-ausserhalb {
	background-color: transparent;
	border-style: dotted;
	border-color: rgba(var(--jahresuebersicht-grau-01-rgb), 1);
}

/* Rapporte / Jahresuebersicht (frueher komplett lokal in
   cms/backend_intern/rapporte/assets/jahresuebersicht.php, hierher verschoben - keine Doppelspurigkeit) */
#tblJahresUebersicht {
	overflow: hidden;
}

#tblJahresUebersicht td,
#tblJahresUebersicht th {
	position: relative;
	text-align: center;
	font-size: 0.8rem;
}

#tblJahresUebersicht td:not(:last-child) {
	cursor: pointer;
}

#tblJahresUebersicht td:first-child {
	width: 125px;
}

#tblJahresUebersicht td:not(:first-child) {
	width: 40px;
}

#tblJahresUebersicht td:last-child {
	width: 75px;
}

/*
#tblJahresUebersicht td:last-child {
    width: auto;
}

#tblJahresUebersicht tr:hover {
    background-color: rgba(244, 246, 252, 0.5);
}

#tblJahresUebersicht td:hover:not(:first-child)::after,
#tblJahresUebersicht th:hover:not(:first-child)::after {
    background-color: rgba(244, 246, 252, 0.5);
    content: '\00a0';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
}
*/

.jahresuebersicht td.abgerechnet-rechnung,
.jahresuebersicht td.abgerechnet-rechnung-teilweise,
.jahresuebersicht td.abgerechnet-lohn-und-rechnung-teilweise,
.jahresuebersicht td.abgerechnet-komplett {
	color: white;
}

/* Auswahl von Tagen */
.jahresuebersicht .ju-selected {
	/*border: 1px solid red;*/
	background: rgba(200, 0, 0, 0.35) !important;
}

/* Jahresübersicht - Details */
.jahresuebersicht_details .weekend {
	--bs-table-bg: var(--jahresuebersicht-grau-01);
}

.jahresuebersicht_details .feiertag {
	--bs-table-bg: var(--jahresuebersicht-schwarz-01);
}

.jahresuebersicht_details .absenz {
	--bs-table-bg: var(--jahresuebersicht-braun-01);
}

.jahresuebersicht_details a {
	color: var(--tp-akzent-text);
}

.jahresuebersicht_details a:hover {
	color: var(--tp-titel);
}

/*
FIXME: Remove this :: 03.06.2025
@media print {
    @page {
        size: landscape;
    }

    body {
        margin: 0;
        padding: 0;
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }
}
*/

/* Dashboard-Widget "System-Diagnose": Fehlerlog-Zeile ist komplett klickbar (statt Badge + separatem
   Button) - Hover-Hintergrund als Feedback braucht echtes CSS (:hover ist inline nicht abbildbar). */
#system-diagnose-card tr.diagnose-log-row {
	cursor: pointer;
}

#system-diagnose-card tr.diagnose-log-row:hover td {
	background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.035));
}

/* Log-Modal "System-Diagnose": kompaktere Accordion-Header (PHP-Log/MySQL-Log) statt Bootstrap-Standardgrösse */
#modalSystemDiagnoseLog .accordion-button {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

#modalSystemDiagnoseLog .accordion-button::after {
	width: 1rem;
	height: 1rem;
	background-size: 1rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. neue Cards - z.B. KI-Import
---------------------------------------------------------------------------------------------------------------------------------- */
.import-card {
	margin-top: 14px;
	padding: 14px;
	border-radius: 10px;
	background: linear-gradient(160deg, var(--tp-tint), var(--tp-tint));
	border: 1px dashed var(--tp-tint-border);
}

.import-card .ttl {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--tp-akzent-text);
	font-size: 0.84rem;
	margin-bottom: 6px;
}

.import-card p {
	font-size: 0.76rem;
	color: var(--tp-text-blass);
	margin: 0 0 10px 0;
	line-height: 1.4;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten / Formulare :: Modal "Neues Formular"
---------------------------------------------------------------------------------------------------------------------------------- */
#modalFormular .modal-header {
	align-items: flex-start;
}

#modalFormular .fm-subtitle {
	margin: 2px 0 0 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--tp-text-leise);
}

#frmFormular .modal-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Bootstrap setzt .form-label auf inline-block :: neben inline-level Controls
   (z.B. .fm-seg) stünde das Label sonst auf derselben Zeile */
#frmFormular .fm-block > .form-label,
#frmFormular .fm-field > .form-label {
	display: block;
}

#frmFormular .fm-req {
	color: var(--tp-rot);
}

#frmFormular .fm-hint {
	margin-top: 4px;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--tp-text-leise);
}

/* Formular-Art :: Karten-Auswahl */
#frmFormular .fm-type-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
}

@media (max-width: 575.98px) {
	#frmFormular .fm-type-grid {
		grid-template-columns: 1fr;
	}
}

#frmFormular .fm-type-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid var(--tp-feld-rand);
	border-radius: 6px;
	background-color: var(--tp-flaeche);
	cursor: pointer;
	transition:
		border-color 0.12s ease-in-out,
		background-color 0.12s ease-in-out,
		box-shadow 0.12s ease-in-out;
}

#frmFormular .fm-type-card:hover {
	border-color: #9dc1ee;
	background-color: var(--tp-tint);
}

/* Radio bleibt im DOM (serializeArray), ist aber visuell durch die Karte ersetzt */
#frmFormular .fm-type-card > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

#frmFormular .fm-type-card.is-selected {
	border-color: var(--tp-primaer);
	background-color: var(--tp-tint);
	box-shadow: inset 0 0 0 1px var(--tp-primaer);
}

#frmFormular .fm-type-card:focus-within {
	outline: 2px solid var(--tp-primaer);
	outline-offset: 2px;
}

#frmFormular .fm-type-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 5px;
	background-color: var(--tp-grund);
	color: var(--tp-text-leise);
	font-size: 0.8rem;
}

#frmFormular .fm-type-card.is-selected .fm-type-icon {
	border-color: var(--tp-primaer);
	background-color: var(--tp-primaer);
	color: #fff;
}

#frmFormular .fm-type-text {
	min-width: 0;
}

#frmFormular .fm-type-name {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tp-titel);
}

#frmFormular .fm-type-card.is-selected .fm-type-name {
	color: var(--tp-link);
}

#frmFormular .fm-type-desc {
	display: block;
	margin-top: 2px;
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--tp-text-leise);
}

#frmFormular .fm-type-check {
	position: absolute;
	top: 8px;
	right: 9px;
	font-size: 0.72rem;
	color: var(--tp-link);
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
}

#frmFormular .fm-type-card.is-selected .fm-type-check {
	opacity: 1;
}

/* Art-abhängige Einstellungen :: feste Mindesthöhe = kein Springen beim Wechsel */
#frmFormular .fm-ctx {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	/*min-height: 148px;*/
	padding: 14px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 6px;
	background-color: var(--tp-grund);
}

#frmFormular .fm-ctx-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tp-text-leise);
}

/* Baustein-Art :: Segment-Control statt zweier Radios */
#frmFormular .fm-seg {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--tp-feld-rand);
	border-radius: 5px;
	background-color: var(--tp-flaeche);
}

#frmFormular .fm-seg-option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 14px;
	border-right: 1px solid var(--tp-feld-rand);
	font-size: 0.8rem;
	color: var(--tp-text);
	cursor: pointer;
}

#frmFormular .fm-seg-option:last-child {
	border-right: 0;
}

#frmFormular .fm-seg-option:hover {
	background-color: var(--tp-tint);
}

#frmFormular .fm-seg-option > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

#frmFormular .fm-seg-option.is-selected {
	background-color: var(--tp-primaer);
	color: #fff;
}

/* DropZone :: nur innerhalb dieses Modals aufgewertet */
#frmFormular .dropzone.fm-dropzone {
	padding: 16px 14px;
	border: 1px dashed #b5c2d8;
	border-radius: 6px;
	background-color: var(--tp-flaeche);
	cursor: pointer;
	transition:
		border-color 0.12s ease-in-out,
		background-color 0.12s ease-in-out;
}

#frmFormular .dropzone.fm-dropzone:hover {
	border-color: var(--tp-primaer);
	background-color: var(--tp-tint);
}

#frmFormular .dropzone.fm-dropzone .dz-message .fa-upload {
	font-size: 1.05rem;
	color: var(--tp-link);
}

#frmFormular .dropzone.fm-dropzone .dz-message strong {
	display: block;
	margin-top: 5px;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--tp-titel);
}

#frmFormular .dropzone.fm-dropzone .dz-message .note {
	display: block;
	margin-top: 2px;
	font-size: 0.7rem;
	color: var(--tp-text-leise);
}

/* Footer :: links der nächste Schritt, rechts die Aktionen */
#modalFormular .modal-footer {
	justify-content: space-between;
}

#modalFormular .fm-nextstep {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 0.75rem;
	color: var(--tp-text-leise);
}

#modalFormular .fm-nextstep .fa-arrow-right {
	flex: none;
	color: var(--tp-link);
}

#modalFormular .modal-toolbar {
	margin-left: auto;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  Stellenmeldepflicht (RAV / Job-Room) :: Zustand "Sperrfrist"

  Eigene Farbe statt einer Bootstrap-Semantikklasse: Die Sperrfrist ist ein Zustand eigener
  Art - freigegeben, aber fuenf Arbeitstage fuer andere Portale gesperrt. Weder Problem
  (danger) noch Abschluss (success) noch Warten (warning). Violett steht ausserhalb der
  Warm-Kalt-Achse und sagt damit "andere Art von Zustand" statt "weiter fortgeschritten".

  Zum Umstellen genuegen die vier Werte hier - der uebrige Code spricht die Farbe nur
  ueber den Namen "sperrfrist" an (bg-, text-, -subtle, -emphasis wie bei Bootstrap).
----------------------------------------------------------------------------------------------------------------------------------- */
:root {
	--rav-sperrfrist: #6f42c1;
	--rav-sperrfrist-subtle: #ede8f9;
	--rav-sperrfrist-emphasis: #4a2c8f;
}

.bg-sperrfrist {
	background-color: var(--rav-sperrfrist) !important;
}
.bg-sperrfrist-subtle {
	background-color: var(--rav-sperrfrist-subtle) !important;
}
.text-sperrfrist {
	color: var(--rav-sperrfrist) !important;
}
.text-sperrfrist-emphasis {
	color: var(--rav-sperrfrist-emphasis) !important;
}
.border-sperrfrist {
	border-color: var(--rav-sperrfrist) !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  Stellenmeldepflicht :: Prozessband ueber der Mandate-Liste

  Die Meldung ist ein Ablauf mit fester Richtung. Das Band zeigt die Abschnitte als
  Verhaeltnis - eine breite gelbe Flaeche heisst "beim RAV liegt viel", und das liest sich
  schneller als eine Reihe Ziffern. Breite traegt die Aussage, die Zahl bestaetigt sie nur.

  Ein Klick auf einen Abschnitt klappt die Mandate dahinter auf; gefiltert wird von dort
  aus ausdruecklich. Der publizierte Abschnitt ist bewusst kein Knopf - dort ist nichts zu
  tun, er dient als Nenner, damit die Verhaeltnisse ueberhaupt etwas aussagen.
----------------------------------------------------------------------------------------------------------------------------------- */
.rav-band {
	padding: 0.5rem 0.7rem 0.6rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--bs-border-color, var(--tp-rand));
	border-radius: 0.25rem;
	background: var(--bs-body-bg, var(--tp-flaeche));
}

/* Kopfzeile :: Aussage links, Randnotizen rechts */
.rav-band .band-kopf {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.rav-band .band-satz {
	font-size: 0.85rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
	margin-right: auto;
}

.rav-band .band-satz b {
	color: var(--bs-body-color);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.rav-band .band-ablauf {
	font-size: 0.75rem;
	color: var(--rav-sperrfrist-emphasis);
	background: var(--rav-sperrfrist-subtle);
	border-radius: 1rem;
	padding: 0.05rem 0.6rem;
	white-space: nowrap;
}

/* Nennt den aktiven Filter und hebt ihn auf. Faellt bewusst staerker auf als eine
   Randnotiz: ein gesetzter Filter wird dauerhaft gespeichert, und bei zugeklapptem
   Filterbereich ist er sonst nirgends zu sehen. */
.rav-band .band-reset {
	border: 1px solid var(--tp-tint-border);
	background: var(--tp-tint);
	border-radius: 1rem;
	padding: 0.05rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--tp-akzent-text);
	white-space: nowrap;
}

.rav-band .band-reset:hover {
	background: var(--tp-tint-border);
}

.rav-band .band-reset .fa-times {
	opacity: 0.6;
}

/* Das Band selbst */
.rav-band .band {
	display: flex;
	gap: 2px;
	height: 26px;
}

.rav-band .band .seg {
	border: 0;
	padding: 0;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	line-height: 1;
}

.rav-band .band button.seg {
	cursor: pointer;
}

/* aufgeklappter oder gefilterter Abschnitt :: Saum statt Farbwechsel, damit die Farbe
   des Abschnitts erkennbar bleibt. Erst eine helle Lucke, dann die dunkle Linie - so
   hebt sich der Saum von jeder der fuenf Fuellfarben ab. */
.rav-band .band .seg[aria-expanded="true"],
.rav-band .band .seg.aktiv {
	box-shadow:
		0 0 0 2px var(--bs-body-bg, #fff),
		0 0 0 3px var(--bs-body-color, var(--tp-titel));
}

/* Dieselben Zustandsfarben wie die Karte in der Sidebar: danger fuer offen, warning fuer
   die Pruefung, --rav-sperrfrist fuer die Sperrfrist, success fuer publiziert. Zwei
   Abweichungen, beide bewusst:

   - "Abgelehnt" bekommt das dunklere Rot (Bootstraps .btn-danger:hover). Beide Zustaende
     sind danger; nebeneinander im Band waeren zwei gleich rote Streifen mit 2px Abstand
     als Verhaeltnis nicht mehr zu lesen.
   - Auf warning steht schwarze Schrift, nicht weisse - so haelt es Bootstrap in
     .text-bg-warning auch, weiss auf #ffc107 ist nicht lesbar. */
.rav-band .seg-offen {
	background: var(--bs-danger, var(--tp-rot));
}
.rav-band .seg-abgelehnt {
	background: var(--tp-rot-dunkel);
}
.rav-band .seg-pruefung {
	background: var(--bs-warning, var(--tp-gelb));
	color: var(--tp-titel);
}
.rav-band .seg-sperre {
	background: var(--rav-sperrfrist);
}
.rav-band .seg-publiziert {
	background: var(--bs-success, var(--tp-gruen));
}

/* Legende :: benennt, was das Band nur einfaerbt - mit Pfeilen, weil die Reihenfolge
   den Ablauf abbildet und keine Rangliste ist */
.rav-band .band-legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.9rem;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.rav-band .band-legende .eintrag {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.rav-band .band-legende .eintrag.leer {
	opacity: 0.5;
}

.rav-band .band-legende b {
	color: var(--bs-body-color);
	font-variant-numeric: tabular-nums;
}

.rav-band .band-legende .pfeil {
	color: var(--bs-border-color, #dee2e6);
	font-size: 0.7rem;
}

.rav-band .punkt {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	flex: none;
}

/* Aufgeklappte Faelle :: die Mandate hinter einem Abschnitt */
.rav-band .band-faelle {
	margin-top: 0.6rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--bs-border-color, var(--tp-rand));
}

.rav-band .faelle-kopf {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
}

.rav-band .faelle-kopf .filtern {
	margin-left: auto;
	font-weight: 400;
	font-size: 0.78rem;
	border: 0;
	background: none;
	padding: 0;
	color: var(--bs-link-color, var(--tp-primaer));
	text-decoration: underline;
}

.rav-band .fall {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	width: 100%;
	text-align: left;
	border: 0;
	background: none;
	padding: 0.2rem 0.45rem;
	border-radius: 0.2rem;
	font-size: 0.82rem;
	color: var(--bs-body-color);
}

.rav-band .fall:hover {
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
}

.rav-band .fall .nr {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	flex: none;
}

.rav-band .fall .wer {
	color: var(--bs-secondary-color, var(--tp-text-leise));
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rav-band .fall .stand {
	flex: none;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 0.7rem;
	padding: 0 0.5rem;
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.rav-band .fall .stand.eilt {
	background: var(--tp-rot-bg);
	color: var(--tp-rot-dunkel);
}

.rav-band .fall .stand.warte {
	background: var(--bs-warning-bg-subtle, var(--tp-gelb-bg));
	color: var(--bs-warning-text-emphasis, var(--tp-gelb-text));
}

.rav-band .fall .stand.sperre {
	background: var(--rav-sperrfrist-subtle);
	color: var(--rav-sperrfrist-emphasis);
}

.rav-band .fall .stand.bereit {
	background: var(--tp-gruen-bg);
	color: var(--tp-gruen-text);
}

@media (max-width: 767.98px) {
	.rav-band .band-satz {
		margin-right: 0;
		width: 100%;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Wiederherstellungs-Codes (Zwei-Faktor-Authentifizierung)

  Bewusst ohne .alert: die Klasse ist im Theme ein Flex-Container mit padding:0, dadurch
  standen Ueberschrift, Text, Codeliste und Schaltflaeche nebeneinander in schmalen Spalten
  statt untereinander. Wird sowohl auf der Login-Seite als auch im Profil verwendet.
---------------------------------------------------------------------------------------------------------------------------------- */
.totp-codes {
	border: 1px solid var(--tp-gelb-rand);
	background: var(--tp-gelb-bg);
	border-radius: 0.375rem;
	padding: 0.75rem 0.9rem;
}

.totp-codes .totp-codes-kopf {
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.totp-codes .totp-codes-text {
	font-size: 0.8rem;
	line-height: 1.4;
	margin: 0 0 0.7rem;
}

/* zwei Spalten :: zehn Codes passen damit auch in die schmale Login-Karte */
.totp-codes .totp-codes-liste {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1rem 0.75rem;
	font-family: var(--bs-font-monospace, monospace);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

.totp-codes .totp-codes-liste li {
	padding: 0.1rem 0;
	user-select: all;
}

.totp-codes .totp-codes-aktionen {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
}

@media (max-width: 380px) {
	.totp-codes .totp-codes-liste {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Bilanz-Leiste über Listen

  Zahlen links, anklickbare Kohorten-Chips rechts. Zeigt auf den ersten Blick, was ansteht -
  ein Auswahlfeld verbirgt dagegen, dass auf der letzten Seite noch etwas offen ist.

  Zuerst für die Benutzer-Übersicht gebaut (Klassen dort inline), hier als .liste-bilanz für
  weitere Listen. Die .bilanz-chip-Regeln standen ebenfalls nur in benutzer.php und sind
  darum hier wiederholt - dort können sie entfallen, sobald jemand die Seite ohnehin anfasst.
---------------------------------------------------------------------------------------------------------------------------------- */
.liste-bilanz {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
	padding: 0.5rem 0.7rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--bs-border-color, var(--tp-rand));
	border-radius: 0.25rem;
	background: var(--bs-body-bg, var(--tp-flaeche));
}

.liste-bilanz .bilanz-zahl {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.liste-bilanz .bilanz-zahl b {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.liste-bilanz .bilanz-zahl span {
	font-size: 0.78rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.liste-bilanz .bilanz-trenner {
	width: 1px;
	align-self: stretch;
	margin: 0.15rem 0;
	background: var(--bs-border-color, var(--tp-flaeche-3));
}

/* die Chips rücken nach rechts, die Bilanz bleibt links */
.liste-bilanz .bilanz-chips {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	align-items: center;
}

.liste-bilanz .bilanz-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	border: 1px solid var(--bs-border-color, var(--tp-rand));
	background: var(--bs-body-bg, var(--tp-flaeche));
	border-radius: 1rem;
	padding: 0.15rem 0.6rem;
	font-size: 0.8rem;
	color: var(--bs-body-color);
	line-height: 1.5;
	white-space: nowrap;
}

.liste-bilanz .bilanz-chip:hover {
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
}

.liste-bilanz .bilanz-chip .zahl {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.75rem;
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
	border-radius: 0.6rem;
	padding: 0 0.4rem;
}

.liste-bilanz .bilanz-chip[aria-pressed="true"] {
	background: var(--tp-tint);
	border-color: var(--tp-tint-border);
	color: var(--tp-akzent-text);
	font-weight: 600;
}

.liste-bilanz .bilanz-chip[aria-pressed="true"] .zahl {
	background: var(--tp-tint-border);
}

.liste-bilanz .bilanz-chip.risk .zahl {
	background: var(--tp-rot-bg);
	color: var(--tp-rot-dunkel);
}

.liste-bilanz .bilanz-chip.warn .zahl {
	background: var(--tp-gelb-bg);
	color: var(--tp-gelb-text);
}

/* erscheint erst, wenn ein Schnellfilter gesetzt ist */
.liste-bilanz .bilanz-chip.reset {
	border-style: dashed;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

/* nichts auffällig :: dann steht das auch da */
.liste-bilanz .bilanz-ok {
	font-size: 0.78rem;
	color: var(--tp-gruen-text);
	background: var(--tp-gruen-bg);
	border: 1px solid var(--tp-gruen-rand);
	border-radius: 1rem;
	padding: 0.1rem 0.7rem;
}

@media (max-width: 767.98px) {
	.liste-bilanz .bilanz-chips,
	.liste-bilanz .bilanz-ok {
		margin-left: 0;
		width: 100%;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten :: Lohn- & Tarifarten (Liste ueber volle Breite + Dialog, 12.09.2026)
  Zellen-HTML kommt aus App\Stammdaten\Lohnarten\LohnartenListe; Dialoge: modal_la_brutto.php, modal_la_netto.php, modal_tarifart.php
---------------------------------------------------------------------------------------------------------------------------------- */

/* Dialogkopf: Titel + Untertitel (Version, Aenderungsdatum) untereinander, Nummer im Kachel-Blau */
.modal-header .modal-titel-block {
	flex: 1 1 auto;
	min-width: 0;
}

.modal-header .modal-titel-block .modal-title .titel-nr {
	color: var(--tp-kachel-text);
	font-variant-numeric: tabular-nums;
}

.modal-header .modal-titel-block .modal-subtitle {
	margin: 2px 0 0 0;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--tp-text-leise);
}

/* Pflichtigkeits-Matrix: feste Reihenfolge, gesetzt = Kachel-Blau, nicht gesetzt = blass - Unterschiede springen ins Auge */
.pflicht-matrix {
	display: inline-flex;
	gap: 2px;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: middle;
}

.pflicht-matrix span {
	display: inline-block;
	min-width: 1.9em;
	padding: 0.1rem 0.25rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.15rem;
	background-color: var(--tp-flaeche);
	color: #c7ccd6;
	line-height: 1.2;
	text-align: center;
}

.pflicht-matrix span.on {
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
}

/* Merkmal-Symbole (System-Lohnart, Default-Vertrag, Berechnung, Margen-Rechner): nur gesetzte erscheinen */
.merkmale {
	display: inline-flex;
	gap: 0.3rem;
	color: var(--tp-kachel-text);
}

/* Kostentraeger-Pille AG (bernstein) / AN (Kachel-Blau) und Ja/Nein-Merkmale wie Stunden-Art */
.pill-kt {
	display: inline-block;
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.pill-kt.ag {
	border-color: var(--tp-gelb-rand);
	background-color: var(--tp-gelb-bg);
	color: #9a6a12;
}

/* Vorzeichen: Minus rot (Abzug), Plus gruen (Zuschlag) - beide gedaempft wie die Pillen; leere Zellen als blasser Strich */
.vorzeichen-minus {
	color: var(--tp-rot-text);
	font-weight: 600;
}

.vorzeichen-plus {
	color: #2f7d3c;
	font-weight: 600;
}

.zelle-leer {
	color: var(--tp-text-blasser);
}

/* Leere Bezeichnungs-Felder neben Basis-/Tarifart-Nummer (input-group-text) erst zeigen, wenn eine Nummer gewaehlt ist */
#modalLA_Brutto .input-group-text:empty,
#modalTA_Stamm .input-group-text:empty {
	display: none;
}

/* Pflichtigkeit im Brutto-Dialog: Kacheln als 4-spaltiges Raster statt Fliesstext - gleich breite Zellen, Reihen buendig;
   lange Beschriftungen (Rueckstellung 13. Monatslohn, Kumuliert Feriensaldo) brechen in der Kachel um.
   Zwei Bloecke in einer Karte (.la-pflicht-gruppe): Sozialversicherungen & Steuern oben, Rueckstellungen & Pfaendung
   darunter - getrennt durch Blocktitel mit eigenem Zaehler und gestrichelter Linie */
#modalLA_Brutto .la-pflicht {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
}

#modalLA_Brutto .la-pflicht-gruppe + .la-pflicht-gruppe {
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--tp-rand-leise);
}

#modalLA_Brutto .la-pflicht-gruppe-titel {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0.3rem 0;
	color: var(--tp-text-leise);
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1;
}

#modalLA_Brutto .la-pflicht .kz {
	display: flex;
	min-width: 0;
}

#modalLA_Brutto .la-pflicht .kz-body {
	flex: 1 1 auto;
	justify-content: center;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kunden / Vertraege :: Fieldset Rapporte (13.09.2026)
  Datenerfassung = Segment mit Beispielwert (App.typSchalter, Wert im versteckten input[name=datenerfassung]),
  Kunden-Portal = Kennzeichen-Kachel (input[name=freigabe]). Markup: kunden/assets/stammdaten_rapporte.php, vertraege/assets/stammdaten.php
---------------------------------------------------------------------------------------------------------------------------------- */

/* Knoepfe zweizeilig: Bezeichnung + Beispielwert (8.25 h / 08:15 / 08:00 - 17:15) - dieselbe Zeit in drei Schreibweisen */
.de-segment .btn {
	display: inline-grid;
	justify-items: start;
	gap: 1px;
	min-height: 38px;
	padding: 0.22rem 0.6rem 0.26rem;
	border-color: var(--tp-feld-rand);
	background-color: var(--tp-flaeche);
	line-height: 1.2;
	text-align: left;
}

.de-segment .btn:hover {
	background-color: var(--tp-flaeche-2);
}

.de-segment .btn .beispiel {
	font-size: 0.7rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

/* aktiver Knopf im Kachel-Blau - ueberstimmt die weisse Grundregel oben (wie .typ-segment in der Kopfzeile) */
.de-segment .btn.btn-kachel,
.de-segment .btn.btn-kachel:hover {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
	position: relative;
	z-index: 1;
}

.de-segment .btn.btn-kachel .beispiel {
	color: inherit;
	opacity: 0.8;
}

/* dichte Variante (Lohn-Setup > Quellensteuer): die Knoepfe stehen dort in derselben Spalte wie der SV-Stapel, dessen
   Segmente kompakt sind (.sv-segment) - gleiche Dichte, damit die Maske eine Schriftgroesse hat. Die uebrigen Masken
   mit .de-segment (Rapporte Kunde/Vertrag, Profil > Design, Aufgaben-Einstellungen) behalten die 38-px-Knoepfe. */
.de-segment.de-dicht .btn {
	min-height: 30px;
	padding: 0.1rem 0.5rem 0.12rem;
	font-size: 0.72rem;
	line-height: 1.15;
}

.de-segment.de-dicht .btn .beispiel {
	font-size: 0.62rem;
}

/* Ansichtsmodus: die Maske setzt disabled auf das versteckte Feld (steht direkt vor dem Segment) - Knoepfe blass, kein Hand-Cursor */
.de-feld:disabled ~ .de-segment .btn {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* Portal-Kachel auf die Hoehe des zweizeiligen Segments bringen */
.de-zeile .kennzeichen-leiste .kz-body {
	min-height: 38px;
}

/* Kachel mit Zusatzzeile (12.10.2026, Mockup "Einstellungen Kacheln" Variante A): gleiche Bauart wie das
   zweizeilige Segment daneben - Titel plus leise Erklaerung. Eine einzeilige Kachel auf Segmenthoehe wirkte leer.
   Markup: <span class="kz-body"><i …></i><span class="kz-text">Titel<span class="kz-zusatz">Erklaerung</span></span></span>
   Erstes Einsatzgebiet: Aufgaben-Einstellungen › Leistungserfassung. */
.kennzeichen-leiste.kz-mit-zusatz .kz-body {
	gap: 0.55em;
	padding: 0.22rem 0.65rem 0.26rem 0.55rem;
	font-size: 0.875rem;
}

.kennzeichen-leiste .kz-text {
	display: inline-grid;
	gap: 1px;
	line-height: 1.2;
}

.kennzeichen-leiste .kz-zusatz {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

/* angehakt: Erklaerung im Kachel-Blau wie der Titel, nur leiser */
.kennzeichen-leiste .kz input:checked ~ .kz-body .kz-zusatz {
	color: inherit;
	opacity: 0.8;
}

/* Raster mit gleich breiten Kacheln (viele Schalter in einer Gruppe) */
.kennzeichen-leiste.kz-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0px, 1fr));
}

.kennzeichen-leiste.kz-raster .kz-body {
	display: flex;
	width: 100%;
	height: 100%;
	white-space: normal;
}

@media (max-width: 767.98px) {
	.kennzeichen-leiste.kz-raster {
		grid-template-columns: minmax(0px, 1fr);
	}
}

/* Untertitel in der Kopfzeile (Vertrag: "Kunden-Einstellungen uebersteuern") - leiser als der Titel, keine Kapitaelchen */
.fieldset-cards legend .legend-hinweis {
	font-size: 0.84rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tp-text-leise);
}

/* Hinweis unter der Zeile (Kunde: Vorgabe fuer neue Vertraege; Rapport-Dialog: Vertragswert) */
.de-hinweis {
	margin-top: 0.4rem;
	font-size: 0.74rem;
	color: var(--tp-text-leise);
}

.de-hinweis .fas {
	margin-right: 0.3rem;
	color: var(--tp-legende-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kunden-Portal :: Rapporte (cms/backend_extern/kunden/rapporte.php, 13.09.2026)
  Liste je freigegebenem Einsatz mit Tagesraster (.rapport-tag rt-* wie im Widget "Nicht abgelieferte Rapporte"),
  aufklappbaren Tagesdetails und Belegen. Daten: CrmExtern\Kunden\KundenRapporte, Rendering in KU_Rapporte (JS).
---------------------------------------------------------------------------------------------------------------------------------- */

/* Abwesenheit im Kundenraster: neutral (ohne Grund), nur die Farbe der Abwesenheiten-Widgets */
.rapport-tag.rt-abwesend {
	background-color: rgba(var(--jahresuebersicht-gelb-01-rgb), 0.35);
	border-color: rgba(var(--jahresuebersicht-gelb-01-rgb), 0.9);
}

.ku-rapporte .ku-rapporte-werkzeuge {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 0.5rem 0 0.75rem;
}

.ku-rapporte .ku-monat .ku-monat-name {
	min-width: 150px;
	font-weight: 500;
}

.ku-rapporte .ku-suche {
	width: 240px;
}

/* Kennzahlen */
.ku-rapporte .ku-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	padding-bottom: 0.75rem;
}

.ku-rapporte .ku-kpi {
	display: grid;
	gap: 2px;
	padding: 8px 12px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
}

.ku-rapporte .ku-kpi .l {
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-kpi .w {
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--tp-akzent-text);
	font-variant-numeric: tabular-nums;
}

.ku-rapporte .ku-kpi .w small {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-kpi-warn.aktiv .w {
	color: var(--tp-gelb-text);
}

/* Verrechnung + Chips */
.ku-rapporte .ku-verrechnung {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	padding-bottom: 0.5rem;
	font-size: 0.8rem;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.ku-rapporte .ku-chip.ok {
	color: var(--tp-gruen);
	border-color: rgba(25, 135, 84, 0.35);
	background-color: rgba(25, 135, 84, 0.07);
}
.ku-rapporte .ku-chip.warn {
	color: var(--tp-gelb-text);
	border-color: rgba(184, 92, 0, 0.35);
	background-color: rgba(253, 126, 20, 0.09);
}
.ku-rapporte .ku-chip.offen {
	color: var(--tp-text-leise);
	border-color: var(--tp-rand);
	background-color: var(--tp-flaeche-2);
}
.ku-rapporte .ku-chip.blau {
	color: var(--tp-kachel-text);
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-kachel-bg);
}
.ku-rapporte .ku-chip.aus {
	color: var(--tp-text-leise);
	border-color: var(--tp-feld-rand);
	background-color: var(--tp-flaeche);
	border-style: dashed;
}

/* Backend: Einsatz ohne Kennzeichen "Kunden-Portal" - im Portal unsichtbar, hier leiser */
.ku-rapporte .ku-zeile.ohne-freigabe .ku-ma .n {
	color: var(--tp-text-leise);
}

/* Liste je Einsatz */
.ku-rapporte .ku-liste {
	border-top: 1px solid var(--tp-rand);
}

.ku-rapporte .ku-zeile {
	border-bottom: 1px solid var(--tp-rand);
}

.ku-rapporte .ku-zeile-kopf {
	display: grid;
	/* feste Breiten fuer Stunden und Status - jede Zeile ist ein eigenes Grid, mit auto-Spalten wuerden die Raster nicht untereinander stehen */
	grid-template-columns: minmax(170px, 1.2fr) minmax(220px, 2fr) 90px 200px auto;
	gap: 12px;
	align-items: center;
	padding: 10px 4px;
	cursor: pointer;
}

.ku-rapporte .ku-zeile-kopf:hover,
.ku-rapporte .ku-zeile.offen .ku-zeile-kopf {
	background-color: var(--tp-tint);
}

.ku-rapporte .ku-zeile-kopf:focus-visible {
	outline: 2px solid var(--tp-primaer);
	outline-offset: -2px;
}

.ku-rapporte .ku-ma {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.ku-rapporte .ku-ma .n {
	font-weight: 500;
	color: var(--tp-titel);
}

.ku-rapporte .ku-ma .s {
	font-size: 0.76rem;
	color: var(--tp-text-leise);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ku-rapporte .ku-std {
	text-align: right;
	font-size: 1rem;
	font-weight: 600;
	color: var(--tp-akzent-text);
	font-variant-numeric: tabular-nums;
}

.ku-rapporte .ku-std small {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-status {
	display: grid;
	gap: 3px;
	justify-items: start;
}

.ku-rapporte .ku-status .ku-chip {
	white-space: normal;
}

.ku-rapporte .ku-aktionen {
	display: flex;
	gap: 4px;
	justify-content: flex-end;
}

.ku-rapporte .ku-zeile.offen .btn-ku-details .fa-chevron-down {
	transform: rotate(180deg);
}

/* Tagesraster: eine Spalte je Kalendertag, Kaestchen + Tageszahl */
.ku-rapporte .ku-raster {
	display: grid;
	grid-template-columns: repeat(31, minmax(0, 1fr));
	gap: 2px;
	align-items: end;
}

.ku-rapporte .ku-raster .t {
	display: grid;
	gap: 2px;
	justify-items: center;
}

.ku-rapporte .ku-raster .t .rapport-tag {
	width: 100%;
	border-radius: 2px;
}

.ku-rapporte .ku-raster .t .nr {
	font-style: normal;
	font-size: 8.5px;
	line-height: 1;
	color: var(--tp-text-blass);
}

.ku-rapporte .ku-raster .t.we .nr {
	color: var(--tp-text-blasser);
}

.ku-rapporte .ku-raster .t.heute .nr {
	color: var(--tp-link);
	font-weight: 600;
}

/* Tagesdetails (zugeklappt versteckt) */
.ku-rapporte .ku-details {
	display: none;
	padding: 0 4px 12px;
}

.ku-rapporte .ku-zeile.offen .ku-details {
	display: block;
}

.ku-rapporte .ku-tage {
	font-size: 0.8rem;
	margin-bottom: 0;
}

.ku-rapporte .ku-tage th {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tp-legende-text);
	background-color: var(--tp-tint);
}

.ku-rapporte .ku-tage .z {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ku-rapporte .ku-tage tr.fehlt td {
	background-color: rgba(220, 53, 69, 0.06);
}

.ku-rapporte .ku-tage tr.fehlt td.hinweis {
	color: var(--tp-rot-dunkel);
	font-weight: 500;
}

.ku-rapporte .ku-tage tr.leise td {
	color: var(--tp-text-blass);
}

.ku-rapporte .ku-tage tfoot td {
	font-weight: 600;
	border-top: 2px solid var(--tp-rand);
}

/* Belege */
.ku-rapporte .ku-belege {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 10px;
}

.ku-rapporte .ku-beleg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	color: var(--tp-text);
	font-size: 0.78rem;
	text-decoration: none;
}

.ku-rapporte .ku-beleg .fas {
	color: var(--tp-rot-dunkel);
}

.ku-rapporte .ku-beleg small {
	display: block;
	font-size: 0.7rem;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-beleg.leer {
	color: var(--tp-text-leise);
	border-style: dashed;
}

.ku-rapporte .ku-beleg.leer .fas {
	color: var(--tp-text-blasser);
}

/* Legende */
.ku-rapporte .ku-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 10px 4px 0;
	font-size: 0.72rem;
	color: var(--tp-text-leise);
}

.ku-rapporte .ku-legende span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ku-rapporte .ku-legende .rapport-tag {
	width: 14px;
	height: 10px;
}

/* schmale Bildschirme: Raster und Aktionen auf eigene Zeilen */
@media (max-width: 991px) {
	.ku-rapporte .ku-zeile-kopf {
		grid-template-columns: 1fr 1fr;
	}

	.ku-rapporte .ku-rasterzelle,
	.ku-rapporte .ku-aktionen {
		grid-column: 1 / -1;
	}

	.ku-rapporte .ku-aktionen {
		justify-content: flex-start;
	}
}

/* Vertrag: solange die Kunden-Einstellungen gelten (Umschalter "Kunden-Einstellungen uebersteuern" aus), zeigen Segment und
   Kachel die Kundenwerte und lassen sich nicht anfassen - Optik wie der Ansichtsmodus */
.de-zeile.de-folgt-kunde .de-segment .btn,
.de-zeile.de-folgt-kunde .kennzeichen-leiste .kz {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Mitarbeiter :: Dialog Mitarbeiter-Einstellungen (13.09.2026, Variante B)
  Standardwerte fuer das Lohn-Setup: Sozialversicherungen als Tableau - eine Zeile je Versicherung, links die Bezeichnung,
  rechts das Segment (.de-segment mit Code und "Normalfall" im Knopf). Markup: mitarbeiter/modal_mitarbeiter_einstellungen.php
---------------------------------------------------------------------------------------------------------------------------------- */
.sv-tableau {
	display: grid;
	grid-template-columns: minmax(130px, max-content) 1fr;
	gap: 0.45rem 1rem;
	align-items: center;
}

.sv-tableau .sv-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--tp-text);
}

.sv-tableau .sv-label small {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

/* lange Zeilen (KTG mit sechs Knoepfen) duerfen umbrechen, statt das Fieldset zu sprengen */
.sv-tableau .btn-group {
	flex-wrap: wrap;
}

/* Betriebsteil: Buchstaben-Knoepfe gleich breit */
.sv-tableau .sv-segment-code .btn {
	min-width: 2.6rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
	.sv-tableau {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	.sv-tableau .sv-label {
		margin-top: 0.4rem;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Hilfe-Modus fuer Masken (13.09.2026)
  JS: cms/js/hilfe.js (Hilfe.init), Texte: tblHilfe (App\System\Hilfe\Hilfe). Hilfe ist eine eigene Ebene, deshalb Bernstein
  (wie .pill-kt.ag) statt Kachel-Blau. Aus = keine Symbole; an = .hilfe-an am Container, Ziele tragen .hilfe-ziel.
---------------------------------------------------------------------------------------------------------------------------------- */
:root {
	--hilfe: #9a6a12;
	--hilfe-bg: var(--tp-gelb-bg);
	--hilfe-border: var(--tp-gelb-rand);
	--hilfe-fehlt: var(--tp-rot-text);
	--hilfe-fehlt-bg: var(--tp-rot-bg);
	--hilfe-ok: #2f7d3c;
}

/* "?"-Knopf im Dialog-Kopf: wie das Schliessen-Kreuz ohne Rahmen, aktiv = Bernstein */
.modal-header .btn-hilfe {
	width: 28px;
	height: 28px;
	margin-right: 4px;
	padding: 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--tp-text-leise);
	font-size: 0.85rem;
	line-height: 1;
}

.modal-header .btn-hilfe:hover {
	background-color: var(--tp-flaeche-2);
	color: var(--tp-titel);
}

.btn-hilfe[aria-pressed="true"],
.btn-hilfe[aria-pressed="true"]:hover {
	background-color: var(--hilfe-bg);
	border-color: var(--hilfe-border);
	color: var(--hilfe);
}

.btn-hilfe.disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Leiste unter dem Dialog-Kopf: Zaehler, Alle Erklaerungen, Hilfe aus */
.hilfe-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 6px 16px;
	background-color: var(--hilfe-bg);
	border-bottom: 1px solid var(--hilfe-border);
	color: var(--hilfe);
	font-size: 0.78rem;
}

.hilfe-leiste .stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}

.hilfe-leiste .rechts {
	margin-left: auto;
}

.hilfe-leiste .btn {
	border: 1px solid var(--hilfe-border);
	background-color: var(--tp-flaeche);
	color: var(--hilfe);
	line-height: 1.2;
}

.hilfe-leiste .btn:hover {
	background-color: var(--tp-gelb-bg);
}

.hilfe-leiste .punkt,
.hilfe-popover .punkt,
.hilfe-panel .punkt {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.hilfe-leiste .punkt.ok,
.hilfe-panel .punkt.ok {
	background-color: var(--hilfe-ok);
}

.hilfe-leiste .punkt.fehlt,
.hilfe-popover .punkt.fehlt,
.hilfe-panel .punkt.fehlt {
	background-color: var(--hilfe-fehlt);
}

/* Ziele: Label-Text, Kachel-Text, Legenden-Titel - gepunktet unterstrichen, Kacheln mit Balken.
   Zaehler-Pillen (.legend-count, inline-block) erben die Unterstreichung nicht. */
.hilfe-an .hilfe-ziel {
	cursor: help;
	text-decoration: underline dotted var(--hilfe);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.hilfe-an .hilfe-ziel.fehlt {
	text-decoration-color: var(--hilfe-fehlt);
}

.hilfe-an .hilfe-ziel:hover,
.hilfe-an .hilfe-ziel.hilfe-aktiv {
	background-color: var(--hilfe-bg);
	border-radius: 2px;
}

.hilfe-an .kz-body.hilfe-ziel {
	text-decoration: none;
	box-shadow: inset 0 -2px 0 var(--hilfe);
}

.hilfe-an .kz-body.hilfe-ziel.fehlt {
	box-shadow: inset 0 -2px 0 var(--hilfe-fehlt);
}

/* nicht erklaert und keine Pflege-Rechte: kein Ziel */
.hilfe-an .hilfe-ziel.ohne,
.hilfe-an .kz-body.hilfe-ziel.ohne {
	cursor: inherit;
	text-decoration: none;
	box-shadow: none;
	background-color: transparent;
}

.hilfe-blitz {
	animation: hilfe-blitz 1.2s ease-out 1;
}

@keyframes hilfe-blitz {
	0% {
		box-shadow: 0 0 0 3px var(--hilfe-border);
	}
	100% {
		box-shadow: 0 0 0 3px transparent;
	}
}

/* Popover (im .modal-content bzw. am Seiten-Container eingehaengt, siehe hilfe.js) */
.hilfe-popover {
	position: absolute;
	z-index: 30;
	width: 380px;
	max-width: calc(100vw - 32px);
	background-color: var(--tp-flaeche);
	border: 1px solid var(--hilfe-border);
	border-top: 3px solid var(--hilfe);
	border-radius: 0.25rem;
	box-shadow: 0 8px 24px rgba(21, 61, 119, 0.18);
	color: var(--tp-titel);
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.hilfe-popover[hidden] {
	display: none;
}

.hilfe-popover .pfeil {
	position: absolute;
	top: -9px;
	left: 18px;
	width: 12px;
	height: 12px;
	background-color: var(--hilfe);
	border-radius: 2px;
	transform: rotate(45deg);
}

.hilfe-popover header {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 12px 4px 12px;
}

.hilfe-popover header h3 {
	flex: 1 1 auto;
	margin: 0;
	color: var(--tp-titel);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
}

.hilfe-popover header .key {
	color: var(--tp-text-blasser);
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.66rem;
}

.hilfe-popover .inhalt {
	padding: 0 12px 10px 12px;
}

.hilfe-popover .inhalt p {
	margin: 0 0 6px 0;
}

.hilfe-popover .abschnitt {
	margin-top: 6px;
}

.hilfe-popover .abschnitt-titel {
	display: block;
	margin-bottom: 3px;
	color: var(--tp-text-leise);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hilfe-popover .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.hilfe-popover .chip {
	display: inline-block;
	padding: 0.05rem 0.45rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.4;
}

.hilfe-popover .chip.keine {
	border-color: var(--tp-rot-rand);
	background-color: var(--hilfe-fehlt-bg);
	color: var(--hilfe-fehlt);
}

.hilfe-popover .beispiel {
	padding: 6px 8px;
	border-left: 3px solid var(--tp-tint-border);
	border-radius: 0 0.2rem 0.2rem 0;
	background-color: var(--tp-legende-bg);
	color: var(--tp-text);
}

.hilfe-popover .fehlt-hinweis {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 0.2rem;
	background-color: var(--hilfe-fehlt-bg);
	color: var(--hilfe-fehlt);
}

.hilfe-popover footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 8px 12px;
	border-top: 1px solid var(--tp-rand-leise);
	color: var(--tp-text-leise);
	font-size: 0.7rem;
}

.hilfe-popover footer .rechts {
	display: inline-flex;
	gap: 4px;
	margin-left: auto;
}

.hilfe-popover footer .frage {
	color: var(--hilfe-fehlt);
	font-weight: 500;
}

.hilfe-popover footer .btn {
	line-height: 1.2;
}

.hilfe-popover .btn-link-danger {
	border-color: transparent;
	color: var(--hilfe-fehlt);
}

.hilfe-popover .btn-link-danger:hover {
	background-color: var(--hilfe-fehlt-bg);
}

/* Bearbeiten-Formular im Popover */
.hilfe-popover .hilfe-form {
	display: grid;
	gap: 6px;
}

.hilfe-popover .hilfe-form label {
	display: block;
	margin-bottom: 2px;
	color: var(--tp-text-leise);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hilfe-popover .hilfe-form label small {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.hilfe-popover .hilfe-form textarea {
	min-height: 64px;
	resize: vertical;
}

.hilfe-popover .hilfe-form .klein {
	margin: 2px 0 0 0;
	color: var(--tp-text-blasser);
	font-size: 0.68rem;
}

/* Seitenleiste "Alle Erklaerungen" (fixed; im Dialog eingehaengt, damit die Fokus-Falle des Modals nicht greift) */
.hilfe-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: 92vw;
	background-color: var(--tp-flaeche);
	border-left: 1px solid var(--tp-rand-leise);
	box-shadow: -8px 0 24px rgba(21, 61, 119, 0.14);
	color: var(--tp-titel);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	transform: translateX(100%);
	transition: transform 0.2s ease-out;
}

.hilfe-panel.offen {
	transform: none;
}

.hilfe-panel > header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background-color: var(--hilfe-bg);
	border-bottom: 1px solid var(--hilfe-border);
	color: var(--hilfe);
}

.hilfe-panel > header .titel {
	flex: 1 1 auto;
	min-width: 0;
}

.hilfe-panel > header h2 {
	margin: 0;
	color: var(--hilfe);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
}

.hilfe-panel > header .maske {
	display: block;
	font-size: 0.72rem;
	opacity: 0.85;
}

.hilfe-panel > header .btn {
	border-color: var(--hilfe-border);
	background-color: var(--tp-flaeche);
	color: var(--hilfe);
	line-height: 1.2;
}

.hilfe-panel .suche {
	padding: 8px 14px;
	border-bottom: 1px solid var(--tp-rand-leise);
}

.hilfe-panel .liste {
	flex: 1 1 auto;
	overflow: auto;
	padding: 6px 0 14px 0;
}

.hilfe-panel .liste h3 {
	margin: 10px 14px 4px 14px;
	color: var(--tp-legende-text);
	font-family: inherit;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hilfe-panel .liste .leer {
	padding: 14px;
	color: var(--tp-text-leise);
}

.hilfe-panel .eintrag {
	display: grid;
	grid-template-columns: 10px 1fr;
	gap: 8px;
	align-items: start;
	width: 100%;
	padding: 5px 14px;
	border: 0;
	background-color: transparent;
	color: var(--tp-titel);
	font: inherit;
	font-size: 0.8rem;
	text-align: left;
	cursor: pointer;
}

.hilfe-panel .eintrag:hover {
	background-color: var(--tp-legende-bg);
}

.hilfe-panel .eintrag .punkt {
	margin-top: 6px;
}

.hilfe-panel .eintrag .t {
	font-weight: 500;
}

.hilfe-panel .eintrag .k {
	display: block;
	overflow: hidden;
	color: var(--tp-text-leise);
	font-size: 0.74rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hilfe-panel .eintrag .k.fehlt {
	color: var(--hilfe-fehlt);
}

@media (prefers-reduced-motion: reduce) {
	.hilfe-panel {
		transition: none;
	}

	.hilfe-blitz {
		animation: none;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Aufgaben :: Dialog Aufgaben-Einstellungen (aufgaben/modal_aufgaben_einstellungen.php, Variante A vom 15.09.2026)
  Tage-Werte als Tableau (Ableitung von .sv-tableau): Beschriftung mit Nebensatz links, Zahl + "Tage" rechts. Die Erinnerungs-
  Zeilen tragen .abhaengig und werden gedaempft, wenn der Hauptschalter "Erinnerungen aktiv" aus ist (nur Optik, Werte bleiben).
---------------------------------------------------------------------------------------------------------------------------------- */
/* Die Fieldset-Karten bringen ihren eigenen Rahmen mit; der seitliche Abstand des Registers
   (.tab .tab-content, 1.25rem) setzte sie ein zweites Mal ab und liess den Dialog schmaler wirken,
   als er ist. Nur hier - andere Masken legen Fliesstext direkt ins Register und brauchen ihn. */
#frmAufgabenEinstellungen .tab .tab-content {
	padding-left: 0;
	padding-right: 0;
}

.ae-tableau {
	display: grid;
	grid-template-columns: minmax(200px, max-content) 1fr;
	gap: 0.45rem 1rem;
	align-items: center;
}

.ae-tableau .ae-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--tp-text);
}

.ae-tableau .ae-label small {
	display: block;
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

.ae-tableau .ae-tage {
	width: auto;
}

.ae-tableau .ae-tage .form-control {
	flex: 0 0 auto;
	width: 70px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.abhaengig {
	transition: opacity 0.12s;
}

.abhaengig.aus {
	opacity: 0.45;
	pointer-events: none;
}

/* Eine ganze Spalte des Aufgaben-Dialogs, die gerade nichts bewirkt (Text-Format, solange die
   Termine als Badge erscheinen). Eigene Regel statt .abhaengig, weil jene am Erinnerungs-Schalter
   haengt und die beiden sich sonst gegenseitig ein- und ausschalten. */
#frmAufgabenEinstellungen .col-auto.aus {
	opacity: 0.45;
	pointer-events: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Mitarbeiter :: Lohn-Setup
  Sozialversicherungen als Stapel: Titelzeile (Bezeichnung, oben rechts Zusammenfassung bzw. Saetze), Segment ueber die ganze
  Breite, Beitraege AN/AG (Prozent | Fixbetrag) erst per Klick auf die Zusammenfassung oder in der Ansicht "voll".
  Aktiv-Status der Bank-Karten 2/3 als Segment inaktiv|aktiv im Kartenkopf, Bank-Karten mit fester Titelspalte.
---------------------------------------------------------------------------------------------------------------------------------- */

/* Knopfzone rechts immer so breit wie Plus + Chevron, rechtsbuendig: Kacheln, Segmente und Zaehler davor stehen damit in jeder
   Karte an derselben Stelle - auch wenn eine Karte kein Plus hat (gilt fuer alle Card-Masken) */
.fieldset-cards legend > .btn-group:last-child {
	min-width: 62px;
	justify-content: flex-end;
}

/* Bank-Karten: Titel mit fester Breite, damit "Bankverbindung 1/2/3" in allen drei Koepfen an derselben Stelle beginnt */
.fieldset-cards legend .legend-title.fix {
	flex: 0 0 10.5rem;
}

.fieldset-cards legend .legend-hinweis.links {
	flex: 1 1 auto;
}

/* Aktiv-Status im Kartenkopf: Segment inaktiv | aktiv (App.typSchalter) - aktiv = Kachel-Blau, inaktiv weiss wie jeder Segment-Knopf.
   Als echte btn-group (zusammenhaengend, nur aussen gerundet) - die Legende loest btn-groups sonst in einzelne Ghost-Knoepfe auf */
.fieldset-cards legend .status-segment {
	gap: 0;
}

.fieldset-cards legend .status-segment > .btn {
	height: 28px;
	margin-left: -1px;
	padding: 0 0.6rem;
	border-radius: 0;
	font-size: 0.82rem;
}

.fieldset-cards legend .status-segment > .btn:first-child {
	margin-left: 0;
	border-top-left-radius: 0.2rem;
	border-bottom-left-radius: 0.2rem;
}

.fieldset-cards legend .status-segment > .btn:last-child {
	border-top-right-radius: 0.2rem;
	border-bottom-right-radius: 0.2rem;
}

.fieldset-cards legend .status-segment > .btn.btn-kachel {
	position: relative;
	z-index: 1;
}

fieldset.inaktiv > legend .legend-title {
	opacity: 0.55;
}

/* dichte Kennzeichen-Leiste (Quellensteuer: fuenf Kacheln in einer Zeile, Langform im Tooltip) */
.kennzeichen-leiste.kz-dicht {
	gap: 3px;
}

.kennzeichen-leiste.kz-dicht .kz-body {
	padding: 0.25rem 0.45rem;
	gap: 0.32em;
}

/* einzeilige Segment-Knoepfe mit vorangestelltem Code - bewusst kleiner als Bootstraps .btn-sm (31 px / 0.875 rem):
   im Stapel stehen bis zu sechs Knoepfe nebeneinander (KTG), und die Beitrags-Knoepfe AN/AG darunter (.sv-art) sind
   ebenfalls kompakt. Gilt auch fuer das Tableau im Dialog Mitarbeiter-Einstellungen, damit beide Masken gleich aussehen. */
.sv-segment .btn {
	min-height: 23px;
	padding: 0.05rem 0.45rem;
	font-size: 0.72rem;
	line-height: 1.2;
}

.sv-segment .btn .code {
	display: inline-block;
	min-width: 0.9em;
	margin-right: 0.15rem;
	font-size: 0.6rem;
	font-weight: 600;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

.sv-segment .btn.btn-kachel .code {
	opacity: 0.75;
}

.sv-segment.sv-segment-code .btn {
	min-width: 2.4rem;
	font-variant-numeric: tabular-nums;
}

/* Ansichtsmodus (verstecktes Feld disabled; auch der Aktiv-Status im Kartenkopf, z.B. Lohnabrechnung > Zahlung an Dritte) und
   gesperrter Betriebsteil (Personalverleiher ab 2026: je Vertrag aus dem SUVA-Beruf; das JS setzt .gesperrt + .fieldset-details,
   die Zeile erscheint damit nur in der Ansicht "voll") */
.de-feld:disabled ~ .sv-segment .btn,
.fieldset-cards legend .de-feld:disabled ~ .status-segment .btn,
.sv-stapel .gesperrt .btn {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* Stapel: ein Block je Versicherung, dezente Trennlinie dazwischen */
.sv-stapel {
	display: flex;
	flex-direction: column;
}

.sv-stapel .btn-group {
	flex-wrap: wrap;
}

.sv-stapel .sv-block {
	padding: 0.25rem 0;
}

.sv-stapel .sv-block + .sv-block {
	border-top: 1px solid var(--tp-rand-leise);
}

.sv-stapel .sv-block:first-child {
	padding-top: 0;
}

.sv-stapel .sv-block:last-child {
	padding-bottom: 0;
}

.sv-stapel .sv-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.6rem;
	min-height: 18px;
	margin-bottom: 0.12rem;
}

.sv-stapel .sv-label {
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--tp-text);
}

.sv-stapel .sv-label small {
	font-size: 0.68rem;
	font-weight: 400;
	color: var(--tp-text-leise);
}

.sv-stapel .sv-label small::before {
	content: "· ";
}

.sv-stapel .sv-sub {
	margin-top: 0.3rem;
	font-size: 0.68rem;
	color: var(--tp-text-leise);
}

/* Hinweis hinter dem Untertitel nur im gesperrten Zustand (Betriebsteil bei Personalverleihern) */
.sv-stapel .sv-sub .sv-sub-hinweis {
	display: none;
	margin-left: 0.4rem;
	color: var(--tp-text-blass);
}

.sv-stapel .gesperrt .sv-sub .sv-sub-hinweis {
	display: inline;
}

/* oben rechts: Zusammenfassung der Beitraege (BVG/KTG, Knopf - oeffnet den Block) bzw. Saetze (AHV/ALV/SUVA/BFF, nur Info) */
.sv-stapel .sv-summe,
.sv-stapel .sv-info {
	margin-left: auto;
	padding: 0.1rem 0.45rem;
	border: 0;
	border-radius: 0.2rem;
	background-color: transparent;
	color: var(--tp-text-leise);
	font: inherit;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

.sv-stapel .sv-summe {
	cursor: pointer;
}

.sv-stapel .sv-summe:hover {
	background-color: var(--tp-hover);
	color: var(--tp-titel);
}

.sv-stapel .sv-summe b,
.sv-stapel .sv-info b {
	font-weight: 600;
	color: var(--tp-text);
}

.sv-stapel .sv-info .quelle {
	margin-left: 0.35rem;
	color: var(--tp-text-blass);
}

/* Code 0 (nicht pflichtig): "kein Abzug" ist nur Text */
.sv-stapel .sv-summe.ohne,
.sv-stapel .sv-summe.ohne:hover {
	background-color: transparent;
	color: var(--tp-text-leise);
	cursor: default;
}

.sv-stapel .sv-block.offen .sv-summe::after,
fieldset.is-expanded .sv-stapel .sv-block:not(.zu) .sv-summe::after {
	content: "▴";
	margin-left: 0.35rem;
	font-size: 0.7rem;
	color: var(--tp-kachel-text);
}

.sv-stapel .sv-block.ohne-abzug .sv-summe::after {
	content: none;
}

/* Beitraege AN/AG: je Zeile Kostentraeger, Segment Prozent|Fixbetrag, genau ein Wertfeld. Sichtbar: Block per Klick geoeffnet (.offen),
   Karte auf "voll" (is-expanded, ausser Block per Klick geschlossen .zu) oder Block .immer (BFF); nie bei Code 0 (.ohne-abzug) */
.sv-stapel .sv-beitraege {
	display: none;
	grid-template-columns: max-content max-content max-content;
	gap: 0.25rem 0.5rem;
	align-items: center;
	margin-top: 0.35rem;
}

.sv-stapel .sv-block.offen .sv-beitraege,
fieldset.is-expanded .sv-stapel .sv-beitraege,
.sv-stapel .sv-block:not(.ohne-abzug) .sv-beitraege.immer {
	display: grid;
}

fieldset.is-expanded .sv-stapel .sv-block.zu .sv-beitraege,
.sv-stapel .sv-block.ohne-abzug .sv-beitraege {
	display: none;
}

.sv-stapel .sv-beitraege .sv-kt {
	min-width: 5.6rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tp-text-leise);
}

.sv-stapel .sv-beitraege .sv-kt small {
	display: block;
	font-size: 0.64rem;
	font-weight: 400;
}

.sv-stapel .sv-art .btn {
	min-height: 26px;
	padding: 0.1rem 0.5rem;
	font-size: 0.74rem;
}

.sv-stapel .sv-wert {
	width: 112px;
}

.sv-stapel .sv-wert .form-control,
.sv-stapel .sv-wert .input-group-text {
	padding: 0.1rem 0.4rem;
	font-size: 0.78rem;
}

.sv-stapel .sv-wert .form-control {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Zahlungsart (fimaBtnToggleSwitch) auf Hoehe des Clearing-Feldes daneben: der Wrapper ist sonst inline-block mit fester Hoehe
   und sitzt auf der Grundlinie - dadurch rutscht der Knopf ein paar Pixel unter das Eingabefeld. Auf .zahlungsart begrenzt, weil
   der Empfaengeradresse-Umschalter im Kartenkopf desselben Formulars die Kopfzeilen-Hoehe behalten muss */
#frmLohnSetupBank .zahlungsart .btn-toggle-switch-wrapper {
	display: block;
	height: auto;
}

#frmLohnSetupBank .zahlungsart .btn-toggle-slider {
	height: 31px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Umschalter (fimaBtnToggleSwitch) im Kartenkopf: ein Knopf, dessen Text den Zustand nennt (Lohnauszahlung: Empfaengeradresse
   Hauptadresse | Abweichende Adresse). Beide Zustaende Kachel-Blau als echte Flaeche - die Ghost-Regel der Legende wuerde den
   Knopf sonst farblos machen; Masse wie das Status-Segment (22px, 0.72rem) */
.fieldset-cards legend .btn-toggle-switch-wrapper {
	display: inline-flex;
	align-items: center;
	height: auto;
	margin: 0 0.4rem 0 0;
}

.fieldset-cards legend .btn-toggle-slider.btn-kachel {
	height: 28px;
	padding: 0 0.6rem;
	border-color: var(--tp-kachel-border);
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.82rem;
	font-weight: 500;
}

.fieldset-cards legend .btn-toggle-slider.btn-kachel:hover,
.fieldset-cards legend .btn-toggle-slider.btn-kachel:focus-visible {
	border-color: var(--tp-kachel-border-hover);
	background-color: var(--tp-kachel-hover);
	color: var(--tp-kachel-text-hover);
}

/* Ansichtsmodus (verstecktes Feld disabled): blass, kein Hand-Cursor - wie die Segmente */
.fieldset-cards
	legend
	.btn-toggle-switch-wrapper:has(input:disabled)
	.btn-toggle-slider {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* Listen in den Lohn-Karten (Alimente): Zeile = Grid, Betrag rechts, Aktionen */
.lohn-liste {
	display: flex;
	flex-direction: column;
}

.lohn-liste .zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.2rem 0.8rem;
	padding: 0.35rem 0.2rem;
	border-bottom: 1px solid var(--tp-rand-leise);
	font-size: 0.85rem;
}

.lohn-liste .zeile:last-child {
	border-bottom: 0;
}

.lohn-liste .zeile:hover {
	background-color: var(--tp-flaeche-2);
}

/* reine Anzeige-Zeile (Lohnauszahlung: Hauptadresse des Mitarbeiters) - kein Zeige-Effekt, Quelle rechts als leiser Hinweis */
.lohn-liste .zeile.nur-anzeige:hover {
	background-color: transparent;
}

.lohn-liste .zeile.nur-anzeige .hauptadresse-quelle {
	white-space: nowrap;
}

.lohn-liste .zeile.nur-anzeige .hauptadresse-quelle .fas {
	margin-right: 0.25rem;
}

.lohn-liste .titel {
	font-weight: 500;
	color: var(--tp-titel);
}

.lohn-liste .sub {
	font-size: 0.76rem;
	color: var(--tp-text-leise);
}

.lohn-liste .betrag {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.lohn-liste .betrag small {
	display: block;
	font-size: 0.7rem;
	color: var(--tp-text-leise);
}

/* Lohnabrechnung > Lohn-Vertrag (produktion/lohn/edit/einstellungen_vertraege.php, 17.09.2026): Vertraege als waehlbare Liste
   (Titel, GAV, Typ-Abzeichen, Saetze FAR/VRM/VZK als Zusammenfassung), darunter der gewaehlte Vertrag als Stapel (.sv-stapel wie die
   SV-Karte): FAR / VRM / VZK je AN+AG in einer Zeile (.sv-prozent), SUVA-Beruf mit den Praemien als Zahlen (.sv-beruf) */
.lohn-liste .zeile.waehlbar {
	padding-left: 0.4rem;
	border-left: 3px solid transparent;
	cursor: pointer;
}

.lohn-liste .zeile.waehlbar.aktiv {
	background-color: var(--tp-tint);
	border-left-color: var(--tp-primaer);
}

.lohn-liste .werte {
	font-size: 0.72rem;
	color: var(--tp-text-leise);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.lohn-liste .werte b {
	font-weight: 600;
	color: var(--tp-text);
}

.lohn-liste .werte .aus {
	color: var(--tp-text-blasser);
}

.typ-badge {
	display: inline-block;
	padding: 0.08rem 0.4rem;
	border: 1px solid transparent;
	border-radius: 0.2rem;
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.typ-badge.vertrag {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
}

.typ-badge.manuell {
	background-color: var(--tp-gelb-bg);
	border-color: var(--tp-gelb-rand);
	color: var(--tp-gelb-text);
}

.vertrag-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.6rem;
	margin: 0.6rem 0 0.3rem;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--tp-rand-leise);
	font-size: 0.8rem;
	color: var(--tp-text-leise);
}

.vertrag-kopf .name {
	font-weight: 600;
	color: var(--tp-titel);
}

.sv-stapel .sv-prozent {
	display: grid;
	grid-template-columns: max-content max-content max-content max-content;
	gap: 0.25rem 0.5rem;
	align-items: center;
	margin-top: 0.3rem;
}

.sv-stapel .sv-prozent .sv-kt {
	min-width: 5.6rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--tp-text-leise);
}

.sv-stapel .sv-prozent .sv-kt small {
	display: block;
	font-size: 0.64rem;
	font-weight: 400;
}

.sv-stapel .sv-block.leer .sv-prozent {
	opacity: 0.6;
}

.sv-stapel .sv-beruf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.25rem 0.8rem;
	margin-top: 0.3rem;
}

.sv-stapel .sv-beruf .beruf-feld {
	flex: 1 1 240px;
	min-width: 240px;
}

.sv-stapel .sv-beruf .praemien {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 0.25rem 0.8rem;
	font-size: 0.74rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

.sv-stapel .sv-beruf .praemien b {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--tp-text);
}

/* Dialog Alimente: Abschnittstitel + getoenter Block (wie der Kinder-Dialog) */
#modalAlimente .dlg-sec-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tp-text-leise);
}

#modalAlimente .dlg-block {
	padding: 10px 12px 8px;
	border-radius: 4px;
	background-color: var(--bg-template-03);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. System > Gruppen :: Verwendung (Sicherheits-/Verteilergruppe, 21.09.2026)

  Liste: zwei Chips je Gruppe (Berechtigungen / Zuweisung) in der Farbe der gesetzten Kennzeichen-Kachel, nicht gesetzt blass und
  durchgestrichen; Systemgruppe mit Schloss. Zelle "Berechtigungen" einer reinen Verteilergruppe: "nicht vorgesehen", Knopf gesperrt.
  Dialog: Hinweise unter den Kacheln (bewusst ohne .alert - im Theme ein Flex-Container mit padding:0, siehe .totp-codes).
---------------------------------------------------------------------------------------------------------------------------------- */
.vw-chips {
	display: inline-flex;
	gap: 4px;
}

.vw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15rem 0.45rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	font-size: 0.72rem;
	line-height: 1.2;
	color: var(--tp-text-blasser);
	white-space: nowrap;
	text-decoration: line-through;
	text-decoration-color: color-mix(
		in srgb,
		var(--tp-text-blasser) 60%,
		transparent
	);
}

.vw-chip.an {
	background-color: var(--tp-kachel-bg);
	border-color: var(--tp-kachel-border);
	color: var(--tp-kachel-text);
	font-weight: 500;
	text-decoration: none;
}

.vw-chip .fa-lock {
	font-size: 0.6rem;
	opacity: 0.6;
}

/* Kennzeichen "System" hinter dem Gruppennamen */
.vw-sys {
	margin-left: 6px;
	padding: 0 4px;
	border: 1px solid var(--tp-rand);
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--tp-text-blass);
	white-space: nowrap;
}

.vw-sys .fa-lock {
	font-size: 0.6rem;
	margin-right: 2px;
}

/* Hinweise im Dialog unter den Kacheln */
.gruppe-verwendung .vw-hinweis {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 6px;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	font-size: 0.75rem;
	color: var(--tp-text-leise);
}

.gruppe-verwendung .vw-hinweis .fa-fw {
	margin-top: 2px;
	flex: none;
}

.gruppe-verwendung .vw-hinweis.warn {
	background-color: var(--tp-gelb-bg);
	border-color: var(--tp-gelb-rand);
	color: var(--tp-gelb-text);
}

.gruppe-verwendung .vw-hinweis.leer {
	background-color: var(--tp-flaeche-3);
}

/* Dialog "Gruppe verwalten" (Bereichs-Leiste wie Benutzer verwalten, .dlg-bereiche): System-Abzeichen in der Kopfzeile,
   Optionskarten fuer die Verwendung, Loeschen links im Fuss */
.gv-badge-sys {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--tp-rand);
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--tp-text-blass);
	vertical-align: middle;
}

.gv-badge-sys .fa-lock {
	font-size: 0.6rem;
}

/* Optionskarte: Symbol | Text | Kachel; die ganze Karte ist klickbar (Gruppen.init), gesetzt = Kachel-Blau angedeutet */
.gv-opt {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0 12px;
	align-items: start;
	margin-bottom: 8px;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.25rem;
	background-color: var(--tp-flaeche-2);
	cursor: pointer;
	transition:
		border-color 0.12s,
		background-color 0.12s;
}

.gv-opt:hover {
	border-color: var(--tp-feld-rand);
}

.gv-opt.an {
	background-color: color-mix(
		in srgb,
		var(--tp-kachel-bg) 55%,
		var(--tp-flaeche)
	);
	border-color: var(--tp-kachel-border);
}

.gv-opt.gesperrt {
	cursor: default;
	opacity: 0.7;
}

.gv-opt .gv-opt-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 0.25rem;
	background-color: var(--tp-flaeche-3);
	color: var(--tp-text-leise);
	font-size: 0.95rem;
}

.gv-opt.an .gv-opt-icon {
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
}

.gv-opt .gv-opt-text {
	min-width: 0;
}

.gv-opt .gv-opt-text h5 {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tp-titel);
}

.gv-opt .gv-opt-text p {
	margin: 1px 0 0;
	font-size: 0.75rem;
	color: var(--tp-text-leise);
}

/* Wirkungs-Chips: wo die Verwendung greift */
.gv-opt .gv-opt-wirkung {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
	font-size: 0.72rem;
	color: var(--tp-text-blass);
}

.gv-opt .gv-opt-wirkung span {
	padding: 0 5px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 3px;
	background-color: var(--tp-flaeche);
}

.gv-opt .gv-opt-schalter {
	align-self: center;
}

.gv-opt .gv-opt-schalter .kz-body {
	min-height: 28px;
}

/* Hinweis innerhalb der Karte ueber die ganze Breite */
.gv-opt .vw-hinweis {
	grid-column: 1 / -1;
	margin-top: 8px;
}

/* Fuss: Loeschen links, Abbrechen/Speichern rechts */
.modal-footer.gv-footer {
	justify-content: space-between;
}

.gv-footer .gv-loeschen {
	border-color: transparent;
	color: var(--tp-rot-text);
}

.gv-footer .gv-loeschen:hover {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Dialog mit Bereichs-Leiste (.dlg-bereiche) :: Benutzer verwalten, Gruppe verwalten

  Leiste links (01 Stammdaten, 02 ..., Zaehler als Abzeichen), rechts Kopfzeile + je ein Panel pro Bereich; das Panel scrollt in sich.
  Herausgeloest aus system/benutzer/modal_benutzer.php (dort bisher inline, .dlg-benutzer), damit der Gruppen-Dialog dieselbe
  Leiste nutzt. Markup: .modal.dlg-bereiche > ... .modal-body > .dlg-raster > .dlg-rail (button.dlg-tab[data-tab]) +
  .dlg-main (.dlg-kopf + .dlg-panel[data-panel][hidden]).
---------------------------------------------------------------------------------------------------------------------------------- */
.dlg-bereiche .modal-body {
	padding: 0;
}

.dlg-bereiche .dlg-raster {
	display: flex;
	min-height: 460px;
}

.dlg-bereiche .dlg-rail {
	width: 205px;
	flex: none;
	border-right: 1px solid var(--bs-border-color, var(--tp-rand));
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
	padding: 0.5rem 0;
}

.dlg-bereiche .dlg-tab {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-left: 3px solid transparent;
	padding: 0.45rem 0.75rem;
	font-size: 0.85rem;
	color: var(--bs-body-color);
}

.dlg-bereiche .dlg-tab:hover:not(:disabled) {
	background: var(--tp-flaeche-2);
}

.dlg-bereiche .dlg-tab[aria-selected="true"] {
	background: var(--bs-body-bg, var(--tp-flaeche));
	border-left-color: var(--tp-primaer);
	font-weight: 600;
	color: var(--tp-akzent-text);
}

.dlg-bereiche .dlg-tab:disabled {
	opacity: 0.45;
}

.dlg-bereiche .dlg-tab .tabnum {
	font-family: var(--bs-font-monospace);
	font-size: 0.65rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.dlg-bereiche .dlg-tab .badge-anzahl {
	margin-left: auto;
	font-size: 0.7rem;
	background: var(--tp-tint);
	color: var(--tp-akzent-text);
	border-radius: 0.5rem;
	padding: 0 0.4rem;
	font-variant-numeric: tabular-nums;
}

.dlg-bereiche .dlg-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dlg-bereiche .dlg-kopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid var(--bs-border-color, var(--tp-rand));
}

/* Symbol-Kreis in der Kopfzeile (Gruppe: Symbol statt Initialen; der Benutzer-Dialog nutzt .benutzer-avatar) */
.dlg-bereiche .dlg-kopf .dlg-avatar {
	width: 38px;
	height: 38px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--tp-tint-border);
	background: var(--tp-tint);
	color: var(--tp-akzent-text);
	font-size: 0.95rem;
}

.dlg-bereiche .dlg-kopf h6 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.dlg-bereiche .dlg-kopf p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.dlg-bereiche .dlg-panel {
	padding: 0.85rem 1rem;
	flex: 1;
	max-height: 62vh;
	overflow-y: auto;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Listen-Zellen Benutzer / Gruppen :: Chips (Gruppen eines Benutzers, Benutzer einer Gruppe), "keine"-Text und
  Berechtigungen-Zelle (Zahl-Abzeichen + Schild-Knopf). Herausgeloest aus system/benutzer/benutzer.php (dort inline), damit die
  Gruppen-Uebersicht dieselben Zellen zeigt (BenutzerController::zelleGruppen/zelleBerechtigungen, GruppenController::sspGruppen).
---------------------------------------------------------------------------------------------------------------------------------- */
.benutzer-gruppen {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.2rem;
}

.benutzer-chip {
	display: inline-block;
	font-size: 0.7rem;
	line-height: 1.5;
	padding: 1px 6px;
	border-radius: 0.2rem;
	background: var(--bs-tertiary-bg, var(--tp-flaeche-2));
	border: 1px solid var(--bs-border-color, var(--tp-rand));
	white-space: nowrap;
}

.benutzer-chip.mehr {
	background: transparent;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

.benutzer-chip.inaktiv {
	background: var(--tp-rot-bg);
	border-color: var(--tp-rot-rand);
	color: var(--tp-rot-dunkel);
	font-weight: 400;
}

.benutzer-bezug,
.benutzer-leer {
	font-size: 0.75rem;
	color: var(--bs-secondary-color, var(--tp-text-leise));
}

/* Berechtigungen: Zahl-Abzeichen (direkt / geerbt / keine) und Schild-Knopf rechts */
.benutzer-rechte {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

.rechte-zahl {
	font-size: 0.7rem;
	padding: 1px 6px;
	border-radius: 0.2rem;
	font-variant-numeric: tabular-nums;
}

.rechte-zahl.direkt {
	background: var(--tp-tint);
	color: var(--tp-akzent-text);
}

.rechte-zahl.geerbt {
	background: var(--tp-gruen-bg);
	color: var(--tp-gruen-text);
}

.rechte-zahl.keine {
	background: var(--tp-rot-bg);
	color: var(--tp-rot-dunkel);
}

.rechte-button {
	--bs-btn-padding-y: 0.1rem;
	--bs-btn-padding-x: 0.35rem;
	margin-left: auto;
}

/* Filterzeile ueber einer Schalter-Liste (Mitglieder, Berechtigungen) */
.dlg-bereiche .dlg-filter {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.dlg-bereiche .dlg-filter .form-control {
	max-width: 260px;
}

.dlg-bereiche .dlg-filter .form-check {
	margin: 0;
	white-space: nowrap;
}

.dlg-bereiche .dlg-filter .dlg-kennzahl {
	margin-left: auto;
	font-size: 0.78rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten :: Steuerschluessel-Dialog (Variante B, Mockup 22.09.2026)
  Markup: stammdaten/allgemein/steuerschluessel.php - Saetze als Eingabezeilen (.stsl-saetze), Zeitstrahl (.stsl-zeitstrahl),
  Pruef-Chips (.stsl-pruefung). Status-Segment und Kacheln kommen aus den allgemeinen Regeln (.status-segment, .kennzeichen-leiste).
---------------------------------------------------------------------------------------------------------------------------------- */

/* Hinweis links im Dialogfuss (Speichern-Semantik), Knoepfe bleiben rechts */
.modal-footer .modal-fuss-hinweis {
	flex: 1 1 auto;
	margin-right: auto;
	font-size: 0.78rem;
	color: var(--tp-text-leise);
}

/* Status inaktiv im Kartenkopf: gesetzter Knopf rot statt Kachel-Blau - der Zustand ist wichtig (wie .kz-aus) */
.fieldset-cards legend .status-segment > .btn.btn-kachel.ist-aus {
	background-color: var(--tp-rot-bg);
	border-color: var(--tp-rot-rand);
	color: var(--tp-rot-text);
}

/* Zeitstrahl: Perioden im Kachel-Blau, offenes Ende laeuft aus, Luecken rot schraffiert, Ueberschneidungen orange */
.stsl-zeitstrahl {
	position: relative;
	margin: 0 0 0.75rem;
	padding: 0.85rem 0 1rem;
}

.stsl-zeitstrahl .leiste {
	position: relative;
	height: 30px;
	overflow: hidden;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche-2);
}

.stsl-zeitstrahl .seg {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.3rem;
	overflow: hidden;
	border-left: 1px solid var(--tp-kachel-border);
	border-right: 1px solid var(--tp-kachel-border);
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.74rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.stsl-zeitstrahl .seg.offen {
	border-right: 0;
	background: linear-gradient(
		90deg,
		var(--tp-kachel-bg) 0 60%,
		color-mix(in srgb, var(--tp-kachel-bg) 30%, var(--tp-flaeche-2)) 100%
	);
}

.stsl-zeitstrahl .seg.offen::after {
	content: "\221E"; /* Unendlich */
	position: absolute;
	right: 0.35rem;
	font-weight: 400;
	opacity: 0.7;
}

.stsl-zeitstrahl .seg.aktuell {
	box-shadow: inset 0 -3px 0 var(--tp-primaer);
}

.stsl-zeitstrahl .seg.luecke {
	border-color: var(--tp-rot-rand);
	background: repeating-linear-gradient(
		135deg,
		var(--tp-rot-bg) 0 5px,
		var(--tp-flaeche) 5px 9px
	);
	color: var(--tp-rot-text);
	font-weight: 500;
}

.stsl-zeitstrahl .seg.ueberschneidung {
	z-index: 2;
	border-color: var(--tp-orange-rand);
	background: repeating-linear-gradient(
		135deg,
		var(--tp-orange-bg) 0 5px,
		transparent 5px 9px
	);
	color: var(--tp-orange-text);
}

.stsl-zeitstrahl .tick {
	position: absolute;
	top: calc(0.85rem + 32px);
	transform: translateX(-50%);
	font-size: 0.66rem;
	color: var(--tp-text-blass);
	font-variant-numeric: tabular-nums;
}

.stsl-zeitstrahl .tick::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -4px;
	width: 1px;
	height: 4px;
	background-color: var(--tp-rand);
}

.stsl-zeitstrahl .heute {
	position: absolute;
	top: calc(0.85rem - 3px);
	bottom: 10px;
	z-index: 3;
	width: 2px;
	background-color: var(--tp-akzent);
}

.stsl-zeitstrahl .heute span {
	position: absolute;
	top: -0.85rem;
	left: -3px;
	padding: 0 2px;
	background-color: color-mix(in srgb, var(--tp-flaeche) 80%, transparent);
	color: var(--tp-akzent);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Saetze-Tabelle: jede Zeile ist ein Formular - keine Zebra-Streifen, kompakte Zellen */
.stsl-saetze {
	margin-bottom: 0;
}

.stsl-saetze th {
	font-size: 0.78rem;
	white-space: nowrap;
}

.stsl-saetze th.zahl,
.stsl-saetze td.zahl {
	text-align: right;
}

.stsl-saetze tbody tr.zeile-eingabe td {
	padding: 0.3rem 0.35rem;
	vertical-align: middle;
	background-color: var(--tp-tint);
}

.stsl-saetze td.kenn {
	width: 1%;
	white-space: nowrap;
}

.stsl-saetze td.aktion {
	width: 36px;
	padding: 0.15rem;
	text-align: center;
}

.stsl-saetze .bis-zelle {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.stsl-saetze .bis-zelle .form-control {
	flex: 1 1 auto;
	min-width: 8.5rem;
}

.stsl-saetze .bis-zelle .kz-body {
	min-height: 31px;
}

.stsl-saetze .form-control.zahl {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Prozent-Eingabe mit Einheit im Feld */
.stsl-saetze .eingabe-einheit {
	position: relative;
	min-width: 6rem;
}

.stsl-saetze .eingabe-einheit .form-control {
	padding-right: 1.6rem;
}

.stsl-saetze .eingabe-einheit .einheit {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

/* Kennzeichen aktuell / abgelaufen / kuenftig + Schloss fuer verwendete Saetze */
.stsl-kenn {
	display: inline-block;
	padding: 0.1rem 0.4rem 0.05rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.stsl-kenn.leise {
	border-color: var(--tp-rand);
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-leise);
}

.stsl-schloss {
	margin-left: 0.25rem;
	color: var(--tp-text-blass);
	font-size: 0.75rem;
}

/* Papierkorb-Knopf: nur Symbol, rot beim Zeigen */
.stsl-saetze .btn-icon {
	width: 29px;
	height: 29px;
	padding: 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--tp-text-leise);
}

.stsl-saetze .btn-icon:hover {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

/* Pruef-Chips unter der Tabelle */
.stsl-pruefung {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	min-height: 1.2rem;
	margin-top: 0.45rem;
	font-size: 0.78rem;
}

.stsl-pruefung .chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-leise);
}

.stsl-pruefung .chip.rot {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

.stsl-pruefung .chip.orange {
	border-color: var(--tp-orange-rand);
	background-color: var(--tp-orange-bg);
	color: var(--tp-orange-text);
}

.stsl-pruefung .chip.gruen {
	border-color: var(--tp-gruen-rand);
	background-color: var(--tp-gruen-bg);
	color: var(--tp-gruen-text);
}

@media (max-width: 767.98px) {
	.stsl-saetze .bis-zelle {
		flex-wrap: wrap;
	}
}

/* Uebersicht: Spalte «Aktueller Satz» - Prozent kraeftig, Zeitraum leise daneben, naechster Satz darunter */
.stsl-aktuell {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.stsl-aktuell .stsl-satz {
	font-weight: 600;
	color: var(--tp-kachel-text);
}

.stsl-aktuell .stsl-zeitraum {
	margin-left: 0.4rem;
	font-size: 0.8rem;
	color: var(--tp-text-leise);
}

.stsl-aktuell .stsl-naechster,
.stsl-aktuell .stsl-kein-satz {
	font-size: 0.8rem;
	color: var(--tp-text-leise);
}

.stsl-aktuell .stsl-naechster .fas {
	margin-right: 0.15rem;
	font-size: 0.7rem;
}

.stsl-aktuell .stsl-kein-satz {
	color: var(--tp-rot-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten :: Sachgebiete (Uebersicht + Dialog Variante B, Mockup 22.09.2026)
  Markup: stammdaten/allgemein/sachgebiete.php, Zellen-HTML aus SachgebieteController (formatChip / formatZusaetze / formatVerwendung).
  Farb-Chip: die gespeicherte Farbe haengt als --sg-farbe am Chip, die Flaeche rechnet wie der Reiterkopf (tabs.css) per
  oklch(from ...) nur den Farbton - hell ein Pastell, dunkel ein gedeckter Ton (dunkel.css). Fallback: Farbe unveraendert.
---------------------------------------------------------------------------------------------------------------------------------- */

/* Kuerzel-Chip in der Sachgebiet-Farbe (Uebersicht + Vorschau im Dialog) */
.sg-chip {
	display: inline-block;
	padding: 0.12rem 0.5rem 0.08rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.2rem;
	background-color: var(--sg-farbe, var(--tp-flaeche-2));
	color: var(--tp-titel);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@supports (color: oklch(from red l c h)) {
	.sg-chip:not(.ohne) {
		background-color: oklch(
			from var(--sg-farbe) 0.93 min(calc(c * 1.1), 0.06) h
		);
	}
}

.sg-chip.ohne {
	border-color: var(--tp-rand);
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text);
}

.sg-status-badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.4rem 0.05rem;
	border: 1px solid var(--tp-rot-rand);
	border-radius: 0.2rem;
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Zusatz-Chips in der Uebersicht, Zahl = Verwendung */
.sg-zusaetze {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.sg-zusatz {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.45rem 0.06rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	color: var(--tp-text);
	font-size: 0.78rem;
	white-space: nowrap;
}

.sg-zusatz .n {
	font-size: 0.68rem;
	color: var(--tp-text-blass);
	font-variant-numeric: tabular-nums;
}

.sg-leer {
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

td.sg-verwendung {
	white-space: nowrap;
	font-size: 0.8rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

td.sg-verwendung b {
	font-weight: 600;
	color: var(--tp-text);
}

/* Dialog: Kuerzel-Feld und Hinweis darunter */
.sg-kuerzel {
	font-weight: 600;
	letter-spacing: 0.03em;
}

.sg-feld-hinweis {
	margin-top: 0.15rem;
	font-size: 0.7rem;
	color: var(--tp-text-blass);
}

/* Farbpalette: keine | Vorlagen | eigene */
.sg-farbe-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem 1.5rem;
}

.sg-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.sg-palette .sg-farb-kachel {
	position: relative;
	width: 44px;
	height: 34px;
	margin: 0 0 1.05rem 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.2rem;
	background-color: var(--f);
	cursor: pointer;
}

.sg-palette .sg-farb-kachel:hover {
	box-shadow: 0 0 0 2px var(--tp-kachel-border);
}

.sg-palette .sg-farb-kachel:focus-visible {
	outline: 2px solid var(--tp-primaer);
	outline-offset: 2px;
}

.sg-palette .sg-farb-kachel.aktiv {
	box-shadow: 0 0 0 2px var(--tp-primaer);
}

.sg-palette .sg-farb-kachel.aktiv::after {
	content: "\2713"; /* Haken */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #203a45;
	font-size: 0.95rem;
	font-weight: 700;
}

.sg-palette .sg-farb-kachel.keine {
	border-color: var(--tp-feld-rand);
	background: repeating-linear-gradient(
		135deg,
		var(--tp-flaeche) 0 6px,
		var(--tp-flaeche-2) 6px 12px
	);
}

.sg-palette .sg-farb-kachel.keine::before {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: 50%;
	height: 2px;
	background-color: var(--tp-rot);
	transform: rotate(-30deg);
	opacity: 0.7;
}

.sg-palette .sg-farb-kachel.keine.aktiv::before {
	display: none;
}

.sg-palette .sg-farb-kachel.keine.aktiv::after {
	color: var(--tp-text);
}

.sg-palette .sg-farb-kachel.eigene {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	padding: 0 0.5rem;
	border-color: var(--tp-feld-rand);
	background-color: var(--tp-flaeche);
	color: var(--tp-text);
	font-size: 0.78rem;
}

.sg-palette .sg-farb-kachel.eigene input {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--tp-feld-rand);
	border-radius: 0.2rem;
	background: transparent;
	cursor: pointer;
}

.sg-palette .sg-farb-kachel.eigene.aktiv::after {
	content: none;
}

.sg-palette .sg-farb-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.05rem;
	font-size: 0.62rem;
	color: var(--tp-text-blass);
	text-align: center;
	white-space: nowrap;
}

/* Vorschau: echter Reiterkopf (tabs.css .nav-tabs.sachgebiet-farbe), nur kleiner */
.sg-vorschau {
	flex: 1 1 260px;
	min-width: 240px;
}

.sg-reiter-vorschau {
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	overflow: hidden;
	background-color: var(--tp-flaeche);
}

.sg-reiter-vorschau .nav-tabs {
	padding: 0.3rem 0.4rem 0;
	margin: 0;
	background-color: var(--tp-legende-bg);
	border-bottom: 1px solid var(--tp-rand-leise);
}

.sg-reiter-vorschau .nav-tabs .nav-link {
	padding: 0.25rem 0.6rem;
	font-size: 0.74rem;
	cursor: default;
}

.sg-reiter-inhalt {
	padding: 0.45rem 0.6rem;
	font-size: 0.72rem;
	color: var(--tp-text-blass);
}

/* Zusaetze-Tabelle: jede Zeile ist ein Formular */
.sg-zusaetze-tabelle {
	margin-bottom: 0;
}

.sg-zusaetze-tabelle th {
	font-size: 0.78rem;
	white-space: nowrap;
}

.sg-zusaetze-tabelle tbody tr.zeile-eingabe td {
	padding: 0.3rem 0.35rem;
	vertical-align: middle;
	background-color: var(--tp-tint);
}

.sg-zusaetze-tabelle td:first-child {
	width: 11rem;
}

.sg-zusaetze-tabelle td.verw {
	width: 1%;
	white-space: nowrap;
	font-size: 0.78rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

.sg-zusaetze-tabelle td.aktion {
	width: 36px;
	padding: 0.15rem;
	text-align: center;
}

.sg-zusaetze-tabelle .form-control {
	height: 29px;
	font-size: 0.85rem;
}

.sg-schloss {
	color: var(--tp-text-blass);
	font-size: 0.75rem;
}

.sg-zusaetze-tabelle .btn-icon {
	width: 29px;
	height: 29px;
	padding: 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--tp-text-leise);
}

.sg-zusaetze-tabelle .btn-icon:hover {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten :: Kalender-Kategorien (Uebersicht + Dialog Variante A, Mockup 22.09.2026)
  Markup: stammdaten/allgemein/kalender_kategorien.php, Zellen-HTML aus KalenderKategorienController (formatPille / formatFarbe /
  formatTermine). Die Termin-Pille traegt --bg / --fg (Kategoriefarbe + Textfarbe) - so zeichnet FullCalendar den Termin
  (color / contrastColor); im Dunkelmodus rechnet dunkel.css die Flaeche wie beim echten Kalender um.
---------------------------------------------------------------------------------------------------------------------------------- */

/* Termin-Pille (Uebersicht) */
.kk-pille {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	padding: 0.15rem 0.55rem 0.1rem;
	border-radius: 0.2rem;
	background-color: var(--bg, var(--tp-flaeche-3));
	color: var(--fg, var(--tp-titel));
	font-size: 0.8rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kk-pille .zeit {
	font-weight: 400;
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
}

/* Kennzeichen Standard (Kalender-Einstellungen des Benutzers) / inaktiv */
.kk-std-badge,
.kk-status-badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.4rem 0.05rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.kk-status-badge {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

/* Farbzelle: Muster, Hex, Kontrast-Kennzeichen */
td.kk-farbe-zelle,
td.kk-termine-zelle {
	white-space: nowrap;
	font-size: 0.8rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

td.kk-termine-zelle b {
	font-weight: 600;
	color: var(--tp-text);
}

.kk-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 0.35rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	background-color: var(--bg);
	vertical-align: -2px;
}

.kk-kontrast {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.4rem 0.05rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-leise);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-width: 4.6rem;
}

/* Icon fest breit (Haken / Warndreieck), damit die Werte bündig stehen */
.kk-kontrast > .fas {
	width: 1.1em;
	text-align: center;
}

/* in der Tabellenzelle ganz rechts */
td.kk-farbe-zelle .kk-kontrast {
	float: right;
	margin-left: 0.75rem;
}

.kk-kontrast.gut {
	border-color: var(--tp-gruen-rand);
	background-color: var(--tp-gruen-bg);
	color: var(--tp-gruen-text);
}

.kk-kontrast.knapp {
	border-color: var(--tp-orange-rand);
	background-color: var(--tp-orange-bg);
	color: var(--tp-orange-text);
}

.kk-kontrast.schlecht {
	border-color: var(--tp-rot-rand);
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

.kk-leer {
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

/* Dialog: Paletten links, Vorschau rechts */
.kk-farbe-zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
	gap: 0.6rem 1.5rem;
	align-items: start;
}

.kk-palette-gruppe {
	margin-bottom: 0.45rem;
}

.kk-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.kk-palette .kk-farb-kachel {
	position: relative;
	width: 38px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.2rem;
	background-color: var(--f);
	cursor: pointer;
}

.kk-palette .kk-farb-kachel:hover {
	box-shadow: 0 0 0 2px var(--tp-kachel-border);
}

.kk-palette .kk-farb-kachel:focus-visible {
	outline: 2px solid var(--tp-primaer);
	outline-offset: 2px;
}

.kk-palette .kk-farb-kachel.aktiv {
	box-shadow: 0 0 0 2px var(--tp-primaer);
}

/* Haken in der automatischen Textfarbe der Kachel (--hk) - zeigt gleich, welche Textfarbe passt */
.kk-palette .kk-farb-kachel.aktiv::after {
	content: "\2713";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hk, #203a45);
	font-size: 0.9rem;
	font-weight: 700;
}

.kk-palette .kk-farb-kachel.eigene {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: auto;
	padding: 0 0.5rem;
	border-color: var(--tp-feld-rand);
	background-color: var(--tp-flaeche);
	color: var(--tp-text);
	font-size: 0.78rem;
}

.kk-palette .kk-farb-kachel.eigene input {
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--tp-feld-rand);
	border-radius: 0.2rem;
	background: transparent;
	cursor: pointer;
}

.kk-palette .kk-farb-kachel.eigene.aktiv::after {
	content: none;
}

/* Textfarbe: Segment automatisch | dunkel | hell + Kontrast-Kennzeichen */
.kk-textfarbe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 0.25rem;
}

.kk-textfarbe .btn {
	font-size: 0.8rem;
}

.kk-punkt {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 0.15rem;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	vertical-align: -1px;
}

.kk-punkt.dunkel {
	background-color: #212529;
}

.kk-punkt.hell {
	background-color: #fff;
}

.fieldset-cards legend .legend-hinweis.kk-warnung {
	color: var(--tp-rot-text);
}

/* Vorschau: drei Monatszellen (eigene Termine farbig, fremde grau) + Sidebar-Liste */
.kk-kal {
	overflow: hidden;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	font-size: 0.72rem;
}

.kk-kal .kopf {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background-color: var(--tp-flaeche-2);
	border-bottom: 1px solid var(--tp-rand-leise);
}

.kk-kal .kopf span {
	padding: 0.2rem 0.4rem;
	color: var(--tp-text-leise);
	font-weight: 500;
	text-align: center;
}

.kk-kal .zellen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.kk-kal .zelle {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 84px;
	padding: 0.25rem 0.3rem;
	border-right: 1px solid var(--tp-rand-leise);
}

.kk-kal .zelle:last-child {
	border-right: 0;
}

.kk-kal .zelle.heute {
	background-color: color-mix(in srgb, var(--tp-gelb) 12%, var(--tp-flaeche));
}

.kk-kal .zelle .tag {
	align-self: flex-end;
	color: var(--tp-text-blass);
	font-variant-numeric: tabular-nums;
}

.kk-kal .zelle .tag.h {
	color: var(--tp-titel);
	font-weight: 700;
}

.kk-kal .ev {
	overflow: hidden;
	padding: 0.12rem 0.35rem;
	border-radius: 3px;
	background-color: var(--bg, var(--tp-flaeche-3));
	color: var(--fg, var(--tp-titel));
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kk-kal .ev .z {
	font-weight: 400;
	opacity: 0.8;
}

.kk-kal .ev.andere {
	background-color: var(--tp-flaeche-3);
	color: var(--tp-titel);
	opacity: 0.55;
}

.kk-sidebar {
	margin-top: 0.4rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
	font-size: 0.78rem;
}

.kk-sidebar div {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.55rem;
	border-bottom: 1px solid var(--tp-rand-leise);
}

.kk-sidebar div:last-child {
	border-bottom: 0;
}

.kk-sidebar .sq {
	width: 12px;
	height: 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	background-color: var(--bg);
}

.kk-sidebar .leise {
	color: var(--tp-text-blass);
}

.kk-sidebar .akt {
	color: var(--tp-titel);
	font-weight: 600;
}

@media (max-width: 767.98px) {
	.kk-farbe-zeile {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  Stammdaten › Abwesenheitsgründe :: Dialog Farbe (Variante A, 05.10.2026)
  Paletten/Kacheln/Kontrast wie Kalender-Kategorien (.kk-*); hier nur Belegt-Punkt, Hinweise und Vorschau
  (Jahresübersicht-Ausschnitt mit den echten Klassen .rapport/.weekend/.feiertag/.abw-farbe + Dashboard-Kästchen).
---------------------------------------------------------------------------------------------------------------------------------- */
/* Farbe wird bereits von einem anderen Grund verwendet */
.kk-palette .kk-farb-kachel.ag-belegt::before {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #212529;
	opacity: 0.45;
}

.ag-hinweise {
	display: grid;
	gap: 0.3rem;
	margin-top: 0.5rem;
}

.ag-hinweis {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	color: var(--tp-text-leise);
	font-size: 0.78rem;
}

.ag-hinweis .kk-kontrast {
	min-width: 0;
}

.ag-vorschau {
	display: grid;
	gap: 0.55rem;
	padding: 0.5rem;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
}

.ag-ju {
	border-collapse: collapse;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
}

.ag-ju th,
.ag-ju td {
	width: 24px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--tp-rand-leise);
	text-align: center;
}

.ag-ju th {
	color: var(--tp-text-leise);
	font-weight: 500;
}

.ag-ju tbody th {
	width: auto;
	padding: 0 0.35rem;
	text-align: left;
}

.ag-widget {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
}

.ag-widget-name {
	overflow: hidden;
	max-width: 120px;
	margin-right: 0.3rem;
	color: var(--tp-text-leise);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.abwesenheit-tag.ag-leer {
	border-color: var(--tp-rand-leise);
	background: none;
}

.ag-legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.4rem;
	color: var(--tp-text-blass);
	font-size: 0.72rem;
}

.ag-legende i {
	display: inline-block;
	width: 12px;
	height: 10px;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 2px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Kopfzeile :: Auswahlliste und Loeschen-Knopf
  Filialen -> Lohn-Setup: die fruehere Toolbar
  ueber den Karten ist in die Kopfzeile der ersten Karte gewandert - Titel, Versions-Auswahl, dann die Knoepfe rechts.
---------------------------------------------------------------------------------------------------------------------------------- */
/* Titel waechst hier nicht, damit die Auswahl direkt daneben steht; der Fueller schiebt die Knoepfe an den rechten Rand. */
.fieldset-cards legend .legend-title.legend-title-fest {
	flex: 0 0 auto;
}

.fieldset-cards legend .legend-fueller {
	flex: 1 1 auto;
}

/* Auswahlliste in der Kopfzeile: liest sich wie eine gesetzte Kennzeichen-Kachel (der gewaehlte Stand ist ein Wert,
   kein Formularfeld) und traegt darum weder Kapitaelchen noch die Laufweite der Kopfzeile. */
.fieldset-cards legend .legend-select {
	height: 28px;
	max-width: 180px;
	padding: 0 0.15rem 0 0.45rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.fieldset-cards legend .legend-select:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Loeschen bleibt ein Ghost-Knopf, traegt aber die Warnfarbe - der Unterschied zum Hinzufuegen daneben muss
   ohne Lesen erkennbar sein; beim Zeigen faerbt sich zusaetzlich die Flaeche. */
.fieldset-cards legend .btn.btn-loeschen {
	color: var(--tp-rot);
}

.fieldset-cards legend .btn.btn-loeschen:hover,
.fieldset-cards legend .btn.btn-loeschen:focus-visible {
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten :: Inaktivierungs-Gruende (Uebersicht + Dialog Variante B, Mockup 22.09.2026)
  Markup: stammdaten/allgemein/inaktivierungsgrund.php, Zellen-HTML aus InaktivierungsGrundController (formatBereiche /
  formatVerwendung). Bereiche = App\Stammdaten\InaktivierungsGrund\InaktivierungsGrund::BEREICHE.
---------------------------------------------------------------------------------------------------------------------------------- */

/* Uebersicht :: Titel, Kennzeichen inaktiv */
.ig-titel {
	font-weight: 600;
	color: var(--tp-titel);
}

.ig-status-badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.4rem 0.05rem;
	border: 1px solid var(--tp-rot-rand);
	border-radius: 0.2rem;
	background-color: var(--tp-rot-bg);
	color: var(--tp-rot-text);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* Uebersicht :: Bereichs-Chips - gesetzt blau (mit Verwendungszahl), fehlend blass */
.ig-bereiche {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.ig-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.45rem 0.06rem;
	border: 1px solid var(--tp-kachel-border);
	border-radius: 0.2rem;
	background-color: var(--tp-kachel-bg);
	color: var(--tp-kachel-text);
	font-size: 0.75rem;
	font-weight: 500;
	white-space: nowrap;
}

.ig-chip .n {
	font-size: 0.66rem;
	font-weight: 400;
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
}

.ig-chip.aus {
	border-color: var(--tp-rand-leise);
	background-color: var(--tp-flaeche);
	color: var(--tp-text-blasser);
	font-weight: 400;
}

.ig-warnung {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.45rem 0.06rem;
	border: 1px solid var(--tp-orange-rand);
	border-radius: 0.2rem;
	background-color: var(--tp-orange-bg);
	color: var(--tp-orange-text);
	font-size: 0.72rem;
	white-space: nowrap;
}

td.ig-verwendung {
	white-space: nowrap;
	font-size: 0.8rem;
	color: var(--tp-text-leise);
	font-variant-numeric: tabular-nums;
}

td.ig-verwendung b {
	font-weight: 600;
	color: var(--tp-text);
}

.ig-leer {
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

/* Dialog :: Tableau - eine Zeile je Bereich, Name und Verwendung links, Ein/Aus-Segment rechts
   (gleiche Bauweise wie das Sozialversicherungs-Tableau im Lohn-Setup) */
.ig-tableau {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}

.ig-tableau .ig-zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.6rem;
	padding: 0.2rem 0.35rem;
	border-radius: 0.2rem;
}

.ig-tableau .ig-zeile:nth-child(odd) {
	background-color: var(--tp-flaeche-2);
}

.ig-tableau .ig-bereich {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.85rem;
	color: var(--tp-titel);
}

.ig-tableau .ig-bereich > .fas {
	color: var(--tp-text-leise);
}

.ig-tableau .ig-name {
	white-space: nowrap;
}

.ig-tableau .ig-hinweis {
	overflow: hidden;
	font-size: 0.75rem;
	color: var(--tp-text-blass);
	text-overflow: ellipsis;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ig-tableau .ig-hinweis .fas {
	font-size: 0.7rem;
}

/* Bereich ohne Maske (Rapporte): das Feld existiert, wird aber nirgends abgefragt */
.ig-tableau .ig-zeile.ohne-dialog .ig-name,
.ig-tableau .ig-zeile.ohne-dialog > .ig-bereich > .fas {
	opacity: 0.7;
}

/* gesperrt: die Zuordnung wird verwendet - «nein» ist nicht mehr waehlbar */
.ig-tableau .ig-zeile.gesperrt .ig-segment .btn[data-typ="0"] {
	opacity: 0.45;
	cursor: default;
}

.ig-tableau .ig-segment .btn {
	height: 24px;
	padding: 0 0.55rem;
	font-size: 0.75rem;
}

.fieldset-cards legend .legend-hinweis.ig-warnung-text {
	color: var(--tp-orange-text);
}

@media (max-width: 575.98px) {
	.ig-tableau .ig-hinweis {
		display: none;
	}
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Stammdaten > Allgemein :: Bereichs-Navigation (Mockup Variante A, 22.09.2026)
  Markup: stammdaten/allgemein/allgemein.php - Suchfeld, Gruppen-Ueberschriften, Zaehler je Bereich.
  Die Bereiche selbst starten erst beim Anzeigen (Stammdaten.setActive), siehe App\Stammdaten\Allgemein\StammdatenBereiche.
---------------------------------------------------------------------------------------------------------------------------------- */

.stammdaten-nav {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--tp-rand-leise);
	border-radius: 0.2rem;
	background-color: var(--tp-flaeche);
}

.stammdaten-suche {
	position: relative;
	padding: 0.4rem;
	border-bottom: 1px solid var(--tp-rand-leise);
	background-color: var(--tp-legende-bg);
}

.stammdaten-suche .fas {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--tp-text-blass);
	font-size: 0.75rem;
}

.stammdaten-suche .form-control {
	padding-left: 1.7rem;
}

/* die Liste selbst scrollt, der Rahmen kommt von .stammdaten-nav */
.stammdaten-nav .list-group {
	overflow-y: auto;
	max-height: min(60vh, 560px);
	border-radius: 0;
}

.stammdaten-gruppe {
	padding: 0.3rem 0.6rem 0.15rem;
	border-top: 1px solid var(--tp-rand-leise);
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-blass);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.stammdaten-gruppe:first-child {
	border-top: 0;
}

.stammdaten-nav .list-group-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

.stammdaten-nav .list-group-item .titel {
	flex: 1 1 auto;
	min-width: 0;
}

.stammdaten-nav .list-group-item .anzahl {
	color: var(--tp-text-blass);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

/* grosse Tabellen (ab StammdatenBereiche::GROSS_AB) laden seitenweise vom Server - die Zahl weist darauf hin */
.stammdaten-nav .list-group-item .anzahl.gross {
	color: var(--tp-orange-text);
}

.stammdaten-nav .list-group-item.active .anzahl {
	color: rgba(255, 255, 255, 0.75);
}

.stammdaten-nav .list-group-item.active .anzahl.gross {
	color: #ffd9a8;
}

.stammdaten-kein-treffer {
	padding: 0.5rem 0.6rem;
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

.stammdaten-nav-fuss {
	padding: 0.3rem 0.6rem;
	border-top: 1px solid var(--tp-rand-leise);
	background-color: var(--tp-flaeche-2);
	color: var(--tp-text-blass);
	font-size: 0.72rem;
}

/* Suchfeld der Bereichs-Tabelle in der Kopfzeile (allgemein.php haengt .dt-search beim init.dt in die Legende):
   klein und ohne Kapitaelchen, die Beschriftung "Search:" entfaellt - das Lupensymbol im Platzhalter genuegt nicht,
   darum bleibt das Feld schmal und traegt den Titel als Tooltip. */
.fieldset-cards legend .dt-search.legend-suche {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-right: 0.4rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.fieldset-cards legend .dt-search.legend-suche label {
	margin: 0;
	color: var(--tp-text-blass);
	font-size: 0.8rem;
}

.fieldset-cards legend .dt-search.legend-suche input {
	width: 12rem;
	height: 28px;
	padding: 0 0.5rem;
	font-size: 0.86rem;
}

/* ----------------------------------------------------------------------------------------------------------------------------------
  xx. Bilder aus dem Dokumenten-Management (Mitarbeiter-Foto, Kunden-Logo, Ansprechpartner-Foto), 23.09.2026
      Ohne hinterlegtes Dokument wird kein Dummy-Bild mehr angezeigt: CRM_Dokumente.setBild() laesst das <img> leer
      und setzt an der Huelle die Klasse "ohne-bild" - sichtbar bleibt dann das Symbol der Maske (.bild-platzhalter).
---------------------------------------------------------------------------------------------------------------------------------- */
.ohne-bild img,
.ohne-bild img[src=""] {
	display: none;
}

/* Symbol statt Bild - nur solange keines hinterlegt ist */
.bild-platzhalter {
	display: none;
	color: var(--tp-text-blasser);
	font-size: 2.2rem;
}

.ohne-bild .bild-platzhalter {
	display: inline-block;
}