* {
	touch-action: manipulation;
}
*, ::before, ::after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	border: 0 none;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	/* font-family: "Open Sans", Helvetica, Arial, sans-serif; Options*/
	background: #ffffff;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	color: #2f323c;
}
a, a:visited {
	outline: 0 none;
	text-decoration: none;
	color: #465281;
}
a:hover, a:focus {
	text-decoration: none;
	color: #000000;
	cursor: pointer;
}
p a, p a:visited {
	line-height: inherit;
}
p, span {
	width: 100%;
	padding: 0.375rem 0.375rem;
	color: #2F323C;
	background-color: rgba(255, 255, 255, 0);
	border-width: 0px;
	border-radius: 0.75rem;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	outline: rgb(215, 217, 224) solid 0px;
}
strong {
	color: #5c6275;
	font-size: 0.95em;
    line-height: 2;
}
/* Headlines */
h1, h2, h3, h4, h5, h6 {
	text-transform: none;
	overflow-wrap: break-word;
	letter-spacing: 0.001em;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0.3em;
}
h1, h2 {
	font-weight: 600;
}
h1 {
	font-size: 2.4em;
}
h2 {
	font-size: 2.0em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.6em;
}
h5 {
	font-size: 1.4em;
}
h6 {
	font-size: 1.2em;
}
ul {
	line-height: 1.5em;
	margin: 0 0 0 1em;
	padding: 0;
	list-style-position: inside;
}
ul li {
	position: relative;
	padding: 0;
}
img {
	display: block;
	height: auto;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}
body {
	background-image: url('https://www.ce-conceptions.de/wp-content/uploads/2023/05/Header_Blue-1.png');
	height: auto;
	min-height: auto;
	background-color: rgb(251,251,251);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.txt-left { text-align: left; }
.txt-right { text-align: right; }
.txt-center { text-align: center; }
.floatleft { float:left; }
.floatright { float:right; }
.mtop1 { margin-top: 1em !important; }
.mtop2 { margin-top: 2em !important; }
.mtop3 { margin-top: 3em !important; }
.mbott05 { margin-bottom: 0.5em !important; }
.mbott1 { margin-bottom: 1em !important; }
.mbott2 { margin-bottom: 2em !important; }
.mbott3 { margin-bottom: 3em !important; }
.padd1 { padding: 1em !important; }
.ptop0 { padding-top: 0 !important; }
.pleft0 { padding-left: 0 !important; }
.pleft1 { padding-left: 1% !important; }
.size11 { font-size: 11px !important; }
.size12 { font-size: 12px !important; }
.size13 { font-size: 13px !important; }
.size14 { font-size: 13px !important; }
.zp-loading tbody { opacity: 0.85; }
.flex { 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: flex-start;
}
.flex-center{ align-items: center; } 
.flex-bottom{ align-items:flex-end;} 
.btn-row .toggle-container { margin-bottom: 15px; }

/* ================= Dünne Scrollbar ================= */

.thin-scroll {
  overflow-y: auto;
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #999 transparent;
}

.thin-scroll::-webkit-scrollbar {
  width: 6px;                     /* Chrome / Edge / Safari */
}

.thin-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.thin-scroll::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

.thin-scroll::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* ================= Mail Progress Overlay ================= */
#crm-mail-progress {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  pointer-events: none;
}

#crm-mail-progress[hidden] {
  display: none;
}

.crm-mail-progress-box {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: center;
}













.crm-mail-progress-box img {
  width: 56px;
  height: 56px;
} 

.is-hidden-force { display:none !important; }
@media only screen and (min-width: 769px) and (max-width: 1024px) {
body {
	background-image: url('https://www.ce-conceptions.de/wp-content/uploads/2023/05/Website_1024-971x1024.png');
}
}

@media only screen and (min-width: 401px) and (max-width: 768px) {
body {
	background-image: url('https://www.ce-conceptions.de/wp-content/uploads/2023/05/Website_768.png');
}
}

@media only screen and (max-width: 400px) {
body {
	background-image: url('https://www.ce-conceptions.de/wp-content/uploads/2023/05/Website_768-400x400.png');
}
}
.anmelden {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 3em;
	padding: 2em 3em;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	overflow: hidden;
}
.box {
	position: relative;
	display: block;
	margin: 1vh 1vw;
	width: 98vw;
	height: 98vh;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 10px;
	overflow: hidden;
}
.box .topleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px;
	background-color: #1f243b;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.box .layout-row {
    position: relative;
    display: flex; /* Flexbox hinzufügen */
    flex-direction: row;
}
.topleiste .userdata {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 0 auto; /* bzw. rechts*/
	color: #efefef;
}
.topleiste .userdata .logout {
	margin-left: 1em;
	background-color: #5696cf;
	border: 1px solid #5696cf;
	padding: 3px 5px;
	color: #333;
	border-radius: 3px;
}
.topleiste .logo img {
	max-width: 200px;/* content:"";display:table;clear:both */
}
.menu-left {
  position: relative;
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 11.5%;
  min-width: 200px;
  margin: 0 0.5% 0 0;
  height: calc(100vh - 100px);
  padding: 10px;
  background-color: #f2f6fd;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: #f2f6fd #fff;
}
.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 1em 0 0 0;
}
.menu ul li {
    margin: 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f1f1f1;
}
.menu ul li:last-child {
    border-bottom: none;
}
.menu ul li a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    font-size: 15px;
	font-weight: 500;
    color: #2c3e50;
    text-decoration: none;
    transition: all 0.3s ease;
	border-radius: 10px;
}
.menu ul li a:hover,
.menu ul li a.active{
    background-color: white;
    padding-left: 20px;
}
.menu ul li img {
    height: 20px;
    width: 20px;
    margin-right: 8px;
    transition: all 0.3s ease;
    object-fit: contain;
}
.menu ul li svg {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.menu ul li .svg-users,
.menu ul li .svg-mail,
.menu ul li .svg-offer {
	color: #5493cb;
}
.menu ul li .svg-check-list {
	color: #1f243b;
}
.menu ul li .svg-zahn,
.menu ul li .svg-brille {
	width: 16px;
    height: 16px;
	margin-left: 2px;
	margin-right: 6px;
}
.menu ul li .svg-zahn,
.menu ul li .svg-brille {
	color: #0041a8;
}
.menu ul li .svg-tafel {
	color: #0041a8;
}


/* Mit Submenu (Angebote) */
/* ===== Angebote-Menü (Icon + Arrow sauber ausgerichtet) ===== */
/* Hauptlink */
.menu .menu-link{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 28px; /* Platz für Arrow */
}

/* Angebots-SVG fix */
.menu .menu-link > svg{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* Arrow absolut rechts im Link */
.menu .menu-arrow{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  width: auto;
}

/* Arrow drehen */
.menu li.has-sub.open .menu-arrow svg{
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* Submenu */
.menu li.has-sub .submenu{
  display: none;
  padding-left: 28px;
}

.menu li.has-sub.open .submenu{
  display: block;
}

/* Responsive Design für Mobilgeräte */
@media (max-width: 768px) {
    .menu ul li a {
        padding: 6px 12px;
    }
}

/* Das Panel ist der eigentliche Scroll-Container */
#detailsPanel {
    overflow-x: hidden;
    overflow-y: auto;
}

#detailsPanel form#detailsForm {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: wrap;

    overflow: visible;
}

#detailsPanel .head {
    position: sticky;
    top: 0;
    z-index: 50;

    width: 100%;
    flex: 0 0 100%;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    background: #fff;
    padding-top: 18px;
    margin: 0;

    overflow: visible;
}

/* Close-Pfeil links im Vordergrund */
.details-panel .arrow-close {
  position: absolute;
  background-color: #fff;
  left: 10px;
  padding-left: 0;
  width: 30px;
  min-width: 26px;
  margin-top: -7px;
  z-index: 60;
}

/* Panel close */
.details-panel .arrow-close {

}
.details-panel .arrow-close img {
	cursor: pointer;
} 
.crm-is-embed .head .arrow-close {
  display: none !important;
}

/* Tabs volle Breite */
.details-panel .tabs {
  width: 100% !important;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

  padding-left: 48px;   /* Platz für arrow-close */
  padding-right: 120px; /* Platz für arrow-navi */
}

/* Navi rechts im Vordergrund */
.details-panel .arrow-navi {
  position: absolute;
  right: 0;
  top: 18px;
  z-index: 60;
  width: 112px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  background: #fff;
  padding: 4px 6px;
}

.details-panel .tabs {
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #ddd transparent;
}

.details-panel .tabs::-webkit-scrollbar {
  height: 4px;                    /* Chrome/Edge/Safari */
}

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

.details-panel .tabs::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

.details-panel .tabs::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}


.topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.search-container {
	position: relative;
	width: 200px;
	margin-top: 12px;
	margin-bottom: 24px;
}
.massen-edit-container {
	position: relative;
	  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
	 align-items: center;
	margin-top: 12px;
	margin-left: 12px;
	margin-bottom: 24px;
}
.search-container input[type="text"],
.massen-edit-container input[type="text"] {
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	background-color: #f9fafb;
}
.search-container input[type="text"] {
	padding: 8px 40px 8px 10px;
	width: 100%;
}
.massen-edit-container input[type="text"] {
	padding: 8px 10px 8px 10px;
}
.search-container input[type="text"]:focus,
.massen-edit-container input[type="text"]:focus {
	border: 1px solid #1f243b;
}
.massen-edit-container .button {
	margin-bottom: 0;
}

.search-container .search-icon {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	pointer-events: none;
	opacity: 0.6;
}
img.keine-rechte {
	max-width: 900px;
}
/* create, delete */
.edit-satz {
	margin: 0;
	text-align: center;
}
.edit-satz  svg {
	width: 28px;
	height: 28px;
}

#hauptbereich {
    position: relative;
    width: 88%;
    flex: 1; /* Nimmt verbleibenden Platz ein */
    overflow: hidden; /* Scrollen wenn nötig */
    height: 100%; 
}

/* =========================================================
 * Tabellen-Container (global)
 * ======================================================= */
#tableBox {
  position: relative;
  display: flex;
  flex-direction: column;

  max-height: calc(96vh - 80px);
  background: #fff;
}

/* Default (readonly) */
tr[data-id],
tr[data-id] input.readonly-input {
  cursor: pointer;
}

/* Edit-Modus */
body.mode-editable tr[data-id] input {
  cursor: text;
}

/* =========================================================
 * Head (Tabs + Suche) – bleibt sichtbar
 * ======================================================= */
#tableBox .head{
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

/* =========================================================
 * Suchfeld (einklappbar)
 * ======================================================= */
#tableBox .head .topline{
  width: 100%;
  overflow: hidden;
  max-height: 53px;                 /* gemessen */
  opacity: 1;
  transition: max-height .18s ease, opacity .18s ease;
}

/* beim Scrollen einklappen */
#tableBox.is-scrolled .head .topline{
  max-height: 0;
  opacity: 0;
}

/* =========================================================
 * Tabs
 * ======================================================= */
#tableBox .head .tabs{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#tableBox .head .tabs::-webkit-scrollbar{
  height: 4px;
}

#tableBox .head .tabs::-webkit-scrollbar-thumb{
  background: #ddd;
}

/* =========================================================
 * Scroll-Wrapper (einziger Scroll-Container!)
 * ======================================================= */
#tableBox .table-scroll-wrapper{
  flex: 1;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ccc #fff;
}

#tableBox .table-scroll-wrapper::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}

#tableBox .table-scroll-wrapper::-webkit-scrollbar-track{
  background: #f1f1f1;
}

#tableBox .table-scroll-wrapper::-webkit-scrollbar-thumb{
  background: #ccc;
  border-radius: 4px;
}

/* =========================================================
 * Tabellen-Header sticky (unter Tabs)
 * ======================================================= */
#tableBox .table-scroll-wrapper thead th{
  position: sticky;
  top: 65px;                /* Höhe der Tabs (.head ohne topline) */
  z-index: 5;
  background: #fff;
}

/* Standard: ohne Tabs-Head */
#tableWrap .bigtable thead th{
  position: sticky;
  position: -webkit-sticky;
  top: 0;                      /* im #tableWrap kleben */
  z-index: 50;                 /* MUSS > td sein */
  background: #fff;
  background-clip: padding-box;/* verhindert "durchscheinen" bei borders */
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 11px 12px !important;
}

/* Wenn du bei Tabs ein Offset brauchst:
   Gib #tableWrap zusätzlich die Klasse "has-tabs-head" */
#tableWrap.has-tabs-head .bigtable thead th{
  top: 0px; /* 60px  */
  z-index: 60;
}

/* Tabelle stabil für sticky */
#tableWrap table {
  width: max-content;          /* wichtig: bei vielen Spalten horizontal korrekt */
  border-collapse: separate;   /* sticky stabiler als collapse */
  border-spacing: 0;
  table-layout: fixed;
  margin-bottom: 40px;
}

/*
 * Fixierte erste Spalte.
 *
 * Wird durch page-init.js nur für Tabellen aktiviert,
 * deren erste TH-Zelle data-row-index="1" besitzt.
 */
table.crm-sticky-first-column > thead > tr > th:first-child,
table.crm-sticky-first-column > tbody > tr > td:first-child,
table.crm-sticky-first-column > tfoot > tr > td:first-child {
    position: sticky;
    left: 0;
}

/*
 * Tabellenkopf liegt über den normalen Tabellenzeilen.
 */
table.crm-sticky-first-column > thead > tr > th:first-child {
    z-index: 60 !important;
    background: inherit;
}

/*
 * Erste Zelle jeder Datenzeile.
 */
table.crm-sticky-first-column > tbody > tr > td:first-child,
table.crm-sticky-first-column > tfoot > tr > td:first-child {
    z-index: 8;
    background: inherit;
}

/*
 * Kleine optische Abgrenzung zur gescrollten Tabelle.
 */
table.crm-sticky-first-column > thead > tr > th:first-child::after,
table.crm-sticky-first-column > tbody > tr > td:first-child::after,
table.crm-sticky-first-column > tfoot > tr > td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

#tableBox .table-scroll-wrapper {
  overflow-x: auto;
}

#tableBox .table-scroll-wrapper.no-horizontal-scroll {
  overflow-x: hidden;
}

#resultWrap  {
  display: table-cell;
  position: absolute;
  overflow: hidden;
  z-index: 99;
}

#resultWrap {
  margin-top: -48px !important;
}

#resultWrap.no-horizontal-scroll {
  margin-top: -40px !important;
}

@media (max-width: 2600px) {
	/* Notebook bei 100% Skalierung */
   #resultWrap {
		margin-top: -58px !important;
   }
	
  #tableBox .table-scroll-wrapper {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
  }

  #tableBox .table-scroll-wrapper.no-horizontal-scroll {
    overflow-x: hidden;
  }

  /* Chrome, Edge, Safari */
  #tableBox .table-scroll-wrapper::-webkit-scrollbar {
    width: 16px !important;
    height: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  #tableBox .table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 8px !important;
  }

  #tableBox .table-scroll-wrapper::-webkit-scrollbar-thumb {
    border-radius: 8px !important;
    border: 3px solid #f1f1f1 !important;
    min-height: 40px !important;
  }

  #tableBox .table-scroll-wrapper::-webkit-scrollbar-button {
    display: none !important;
  }

  /* Für Chrome auf Windows speziell */
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    #tableBox .table-scroll-wrapper::-webkit-scrollbar {
      width: 16px !important;
      height: 16px !important;
    }
  }
}

@media (min-width: 2000px) and (max-width: 2600px) and (min-resolution: 1.5dppx) {
	
 #resultWrap {
	margin-top: -48px !important;
  }
	
  #tableBox .table-scroll-wrapper {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
  }

  #tableBox .table-scroll-wrapper.no-horizontal-scroll {
    overflow-x: hidden;
  }
}

/* Optional: erste(n) Spalte(n) auch sticky links (falls ihr Nr/ID fix wollt)
#tableWrap .bigtable thead th[data-col-key="nr"],
#tableWrap .bigtable tbody td[data-col="nr"]{
  position: sticky;
  left: 0;
  z-index: 70;
  background:#fff;
}
*/
.tabelle th, .tabelle td {
	overflow: hidden;
  	text-overflow: ellipsis;
	white-space: nowrap; 
	border: 1px solid rgb(229, 230, 235); /* Rahmen für Tabellenzellen */
	text-align: left; /* Text links ausrichten */
	min-width: 70px;
}
/* lauf. nummer */
.tabelle th:first-child,
.tabelle td:first-child { 
	min-width: 44px; 
	width: 44px; 
} 
.tabelle td { 
	padding: 0; /* td input haben padding */
}
.tabelle th,
.tabelle th:first-child,
.tabelle td:first-child,
.tabelle td[data-col="id"] {
    padding: 11px 8px; /* ID ohne input */
}
/* Filter-Icon im Tabellen-Header */
table thead th { position: relative; }
table th .marker {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 6px;
vertical-align: middle;
opacity:0;
}
th.has-filter .marker,
th.has-group .marker,
th.has-sort .marker { opacity: 1; }
.tabelle th,
.tabelle thead tr {
	color: #737b91; /* Hintergrundfarbe für Tabellenkopf */
	background-color: #ffffff;
}
.tabelle td:first-child {
	text-align: center;
}
.tabelle table tr {
	background-color: #ffffff;
}
.tabelle table tr:nth-child(odd) {
	background-color: #f9fafb;
}
 /* Sichtbarer Scrollbar-Container */

.scrollbar-container {
	width: 100%;
	height: 20px;
	background: #f1f1f1;
	border-top: 1px solid #ddd;
}

.custom-scrollbar {
	width: 100%;
	height: 100%;
	position: relative;
	background: #e0e0e0;
	border-radius: 10px;
	cursor: pointer;
}

.scroll-thumb {
	position: absolute;
	height: 100%;
	background: #4ca1af;
	border-radius: 10px;
	min-width: 30px;
}

#resultWrap table { 
  table-layout: fixed !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
}

.tabelle.result::-webkit-scrollbar { /* Scroll-Leiste verstecken für Webkit-Browser (Chrome, Safari) */
    width: 0;
    height: 0;
    background: transparent;
}
.tabelle.result { /* Scroll-Leiste verstecken fuer Firefox */
    scrollbar-width: none;
}
.tabelle.result { /* Scroll-Leiste verstecken uerr Internet Explorer und Edge */
    -ms-overflow-style: none;
}
tr.group-row td {
	border-bottom: 1px solid transparent;
	padding: 11px 12px;
}

.button {
  color: #fff;
  background-color: #3381ff;
  height: 34px;
  min-height: 34px;
  min-width: 100px;
  box-sizing: border-box;
  padding: 0 2px;
  border-radius: 3px;
  border: thin solid rgba(0,0,0,0);
  line-height: 32px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  user-select: none;
  transition: all .1s ease;
  margin-bottom: 15px;
  /* box-shadow: 0 8px 18px rgba(51, 129, 255, 0.16), inset 0 -1px 0 rgba(0,0,0,0.08); */
  /* width: auto; */
  /*  margin: 0; */
}
.button:hover {
  box-shadow: 0 8px 18px rgba(51, 129, 255, 0.22), inset 0 -1px 0 rgba(0,0,0,0.08);
}
.flex .button {
	align-self: flex-end;
}
.button.txt-dark {
	color: rgb(38, 47, 77);
}
.button:hover {
 background-color: #0f6bff;
}
.button.rosa {
	color: #ed4e40;
    background-color: #fcdad4;
    border-color: #ed4e40;
}
.button.rosa:hover {
	 background-color:  #f9beb9;
}
.button.rot {
    background-color: rgb(255, 63, 63);
}
.button.rot:hover {
	  background-color: rgba(255, 63, 63, 0.8);
}
.button.hellblau {
    background-color: rgb(100, 193, 250);
}
.button.hellblau:hover {
	  background-color: rgba(100, 193, 250, 0.8);
}
.button.orange {
	color: rgb(38, 47, 77);
	background-color: rgb(255, 127, 102);
}
.button.orange:hover {
	  background-color: rgba(255, 127, 102, 0.8);
}
.button.lila {
	color: rgb(38, 47, 77);
	background-color: rgb(236, 135, 226);
}
.button.lila:hover {
	  background-color: rgba(236, 135, 226, 0.8);
}

.button.gelb {
	color: rgb(38, 47, 77);
	background-color: rgb(250, 218, 51);
}
.button.gelb:hover {
	  background-color: rgba(250, 218, 51, 0.8);
}
.button.gruen {
    background-color: rgb(82, 204, 116);
}
.button.gruen:hover {
	  background-color: rgba(82, 204, 116);
}
.button.dunkelgruen {
    background-color: rgb(0, 127, 31);
}
.button.dunkelgruen:hover {
	  background-color: rgba(0, 127, 31);
}


/* ============================================================
   CRM Panels rechts
   Panel 1: #detailsPanel
   Panel 2: #detailsPanel2
   ============================================================ */

/* Gemeinsame Basis */
#detailsPanel,
#detailsPanel2 {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

  position: fixed;
  top: 0;
  right: 0;

  min-width: 670px;
  width: 24vw;
  height: 100vh;
  max-height: 100vh;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s ease-in,
    visibility 0s linear 0.35s;
}

#detailsPanel .panel-resizer,
#detailsPanel2 .panel-resizer {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 20;
  background: transparent;
}

#detailsPanel .panel-resizer:hover,
#detailsPanel2 .panel-resizer:hover {
  background: rgba(0, 0, 0, 0.08);
}

body.panel-resizing {
  cursor: ew-resize;
  user-select: none;
}

/* Mobile */
@media (max-width: 550px) {
  #detailsPanel,
  #detailsPanel2 {
    min-width: 370px;
  }
}

/* ============================================================
   Panel 1
   ============================================================ */

#detailsPanel {
  z-index: 1000;
}

/* Panel 1 sichtbar */
#detailsPanel.panel-visible,
#detailsPanel.is-open {
  display: block;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s ease-in;
}

/* Panel 1 hidden */
#detailsPanel.panel-hidden {
  display: block;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s ease-in,
    visibility 0s linear 0.35s;
}

/* Panel 1 Initialzustand */
#detailsPanel:not(.panel-visible):not(.panel-hidden):not(.is-open) {
  display: block;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Panel 1 wird nach links geschoben, wenn Panel 2 offen ist */
#detailsPanel.panel-visible.with-subpanel,
#detailsPanel.is-open.with-subpanel {
  transform: translateX(calc(-100% + 12px));
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   Panel 2
   ============================================================ */

#detailsPanel2 {
  z-index: 1100;
}

/* Panel 2 sichtbar */
#detailsPanel2.panel-visible,
#detailsPanel2.is-open {
  display: block !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s ease-in;
}

/* Panel 2 hidden */
#detailsPanel2.panel-hidden {
  display: block !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    transform 0.25s ease-in,
    opacity 0.15s ease-in,
    visibility 0s linear 0.25s;
}

/* Panel 2 preload: iframe darf laden, Panel bleibt unsichtbar */
#detailsPanel2.is-preloading {
  display: block !important;
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Falls Klassen kollidieren: Preload gewinnt immer */
#detailsPanel2.is-preloading.panel-visible,
#detailsPanel2.is-preloading.is-open {
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Falls visible und hidden gleichzeitig vorhanden sind:
   visible gewinnt nur ohne preload */
#detailsPanel2.panel-visible.panel-hidden:not(.is-preloading) {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ============================================================
   Panel-Inhalte
   ============================================================ */

form#detailsForm {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap; 
     overflow: visible !important;
    min-height: 100%;
}

#detailsContent2 {
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

#detailsPanel2Body {
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  background: #ffffff;
  overflow: hidden;
}

#detailsPanel2Body iframe[data-panel2="1"] {
  width: 100%;
  height: calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  display: block;
  border: 0;
}

/* ============================================================
   Panel 2 Close Button
   ============================================================ */

#detailsPanel2 .arrow-close {
  cursor: pointer;
  user-select: none;
}

#detailsPanel2 .arrow-close img {
  display: block;
  pointer-events: none;
}

/* ============================================================
   Embed / iframe-Modus
   Schließen-Pfeil innerhalb des iframe verstecken
   ============================================================ */

/* mit scrollbalken */
.details-panel .head {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 5;                     /* über Formfeldern halten */
  background: #fff;               /* damit nichts durchscheint */
  padding-top: 18px;               /* optisch etwas Luft oben */
  margin-bottom: 0;
  box-shadow: none;               /* Standard: ohne Schatten */
  transition: box-shadow .2s ease;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.details-panel.head .tabs::-webkit-scrollbar{
  height: 4px;
}

.details-panel .head .tabs::-webkit-scrollbar-thumb{
  background: #ddd;
}

 .head h5 
.details-panel .head h5 {
	margin-bottom: 0;
}
.details-panel span.input-label {
	display: inline-block;
	margin: 0;
	overflow: hidden;
}
.details-panel label, 
.details-panel legend {
  display: inline-block;
  box-sizing: border-box; /* Wichtig für Padding/Border */
  margin-bottom: 15px;
}
.details-panel input[type="email"], .details-panel input[type="number"], .details-panel input[type="search"], 
.details-panel input[type="text"], .details-panel input[type="tel"], .details-panel input[type="url"], 
.details-panel input[type="password"], .details-panel textarea  {
  background-color: #f9fafb;
  border: 1px solid #f1f1f4;
  color: #333;
  width: 100%;
  font-size: 14px;
  padding: 2px 5px;
  margin: 0;
  border-radius: 3px;
  box-sizing: border-box; /* Korrigiert Box-Model */
  transition: all 0.3s ease;
 font-family: inherit;
 height: 32px;
 line-height: 32px;
}
.details-panel textarea  {
	 height: auto;
	line-height: 1.5;
	margin-bottom: 10px;
}
.details-panel input[type="email"]:focus , .details-panel input[type="number"]:focus , .details-panel input[type="search"]:focus , 
.details-panel input[type="text"]:focus , .details-panel input[type="tel"]:focus , .details-panel input[type="url"]:focus , 
.details-panel input[type="password"]:focus , .details-panel textarea:focus {
	outline: none;
	border-color: #3381ff;
	box-shadow: 0 0 0 3px rgba(51, 129, 255, 0.2);
}
 /* Angepasster Date Input Stil */
.details-panel input[type="date"] {
	background-color: #f9fafb;
	border: 1px solid #f1f1f4;
	color: #333;
	width: 100%;
	font-size: 14px;
	padding: 2px 5px;
	border-radius: 3px;
	box-sizing: border-box;
	transition: all 0.3s ease;
	font-family: inherit;
	height: 32px;
    line-height: 32px;
}
.details-panel input[type="date"]:focus {
	outline: none;
	border-color: #3498db;
	box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* Platzhalter-Stil anpassen */
.details-panel input[type="date"]::placeholder {
	color: #aaa;
}
/* Für Browser, die den Date-Picker-Symbol stylen */
.details-panel input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	padding: 5px;
	border-radius: 3px;
	background-color: #f8f9fa;
	transition: background-color 0.3s ease;
}
.details-panel input[type="date"]::-webkit-calendar-picker-indicator:hover {
	background-color: #e9ecef;
}
/* Für Firefox */
.details-panel input[type="date"]::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/* Für Internet Explorer */
.details-panel input[type="date"]::-ms-clear {
	display: none;
}
/* Tabs im Panel */
.tabs,
.details-panel .tabs {
  width: 93%;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2px;
}
/* Flexbox-Container für Labels */
.details-panel .form-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}
.details-panel .form-row.row-heading {
  margin: 1em 0 0.5em;
  border-bottom: 1px solid #ddd;
}
.details-panel .form-row-intern {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}
.details-panel #tarif-block .button {
	align-self: flex-end;
	margin: 0 0 15px auto;
	width: 100%;
}
.details-panel  .pos-left {
	margin: 0 auto 0 0; /* flex */
}
.details-panel  .pos-right {
	margin: 0 0 0 auto; /* flex */
}
.tab,
.details-panel .tab {
	flex: 0 0 auto; /* Tabs nicht umbrechen */
  padding: 8px 14px;
  cursor: pointer;
  background: #f8f9fa;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color .2s ease;
}
 .tab.active,
 .tab.zweite-panel,
 .tab:hover ,
.details-panel .tab.active,
.details-panel .tab:hover {
  color: #fff;
  background-color: #1f243b;
  border-color: transparent;
}
.tab img,
.details-panel .tab img {
	max-height: 1.5em;
}
.tab-content,
#detailsPanel .tab-content {
    display: none;
    width: 100%;
    padding: 20px;
    scroll-margin-top: 68px;

    /* wichtig für sticky .head */
    height: auto;
    min-height: calc(100vh - 68px);
}
.tab-content.active,
#detailsPanel .tab-content.active {
	display: block;
}
@media (max-width: 992px) {
	.main-content {
		flex-direction: column;
	}

	.user-list, .user-panel {
		width: 100%;
	}

	.w50, .w33, .w25, .w20 {
		width: 100%;
	}
}
/* aktive Tabellenzeile */
tbody tr.active-tr,
.panel-table tr.active-sub-tr {
  outline: 1px solid #3381ff !important;
  background-color: rgba(15,107,255,.15) !important;
}
tbody tr.active-tr td input,
.panel-table tr.active-sub-tr td input {
	border-color: transparent!important;
}
/* optional: Hover, damit Klickziel klar ist */
tbody tr:hover {
  background: #f8fbff;
  cursor: pointer;
}
#flt_min, #flt_max {
	width: 80px;
}
#resultTable tr { /* tr */
	height: 40px;
}
#resultTable td {
	text-align: center;
}
tbody tr input.editable-input:focus {
	  outline: 1px solid #3381ff !important;
}
/* Zusätzliche CSS-Stile für SSE Updates */
td .readonly-input.field-updated,
td.field-updated {
  background-color: #d4ffda !important;
  transition: background-color .4s ease;
}
/* tr.tr-aktive.row-updated -geanderte Zeile */
/* Nur neue zeile */
.row-updated { 
	background-color:#d4ffda !important;
	transition:background-color 1s ease
} 
.row-deleting {
    opacity: 0.6;
    background-color: #ffebee !important;
    transition: all 0.5s ease;
}
.sse-status {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 12px;
    z-index: 1000;
}
.sse-connected {
    background-color: #4caf50;
    color: white;
}
.sse-disconnected {
    background-color: #f44336;
    color: white;
}
.sse-reconnecting {
    background-color: #ff9800;
    color: white;
}
/* Gruppierung */
tr.group-row { background:#f6f8fa; cursor:pointer; }
tr.group-row td { font-weight:600; }
tr.group-child { background:#fff; }

/* Tarifblock  im tab 1 */
#tarif-block {
  background-color: #f9fafb;
  padding: 10px;
}
#tarif-block #tarif-title {
	font-size: 1.6em;
	margin-bottom: 0.1em;
}
#tarif-block .small {
	margin-bottom: 1.5em;
}
#tarif-block .mb-vetrag {
	margin-top: 1em;
	margin-bottom: 0 ;
}
#tarif-block .mb-vetrag label {
	margin-bottom: 0 !important;
}

/* Gruppierungs-Styles */
.group-row {
	background-color: #eef2f8;
	font-weight: bold;
	cursor: pointer;
}

.group-row:hover {
	background-color: #e2e8f0;
}

.group-child {
	background-color: #f8fafc;
}

.group-child:hover {
	background-color: #f1f5f9;
}

/* Verbesserte Pfeil-Styles */
.grp-caret {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	position: relative;
	transition: transform 0.2s ease;
}

.grp-caret::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-top: 5px solid transparent;

	border-bottom: 5px solid transparent;
	border-left: 8px solid #4b5563; /* Farbe des Pfeils */
}

/* Pfeil zeigt nach unten, wenn expanded */
.group-row[data-expanded="1"] .grp-caret {
	transform: rotate(90deg);
}

/* Zusätzliche Styles für bessere Visualisierung */
.group-row td:first-child {
	display: flex;
	align-items: center;
}

.group-count {
	margin-left: 8px;
	background-color: #4b5563;
	color: white;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: normal;
}

/* Basis wie gehabt, etwas neutraler gesetzt */
.details-panel select,
.massen-edit-container select {
  display: block;
  box-sizing: border-box;
  background: #f9fafb;
  border: 1px solid #f1f1f4;
  color: #333;
  font: 14px/1.2 inherit;   /* kompaktere Line-Height */
  border-radius: 3px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  padding: 4px 28px 4px 8px; /* weniger Innenabstand */
  height: 32px;              /* kompakt, einzeilig */
  opacity: 1 !important;
}

.details-panel select {
  width: 100%;
  max-width: 100%;
}

.massen-edit-container select,
.massen-edit-container input {
	width: auto;
	margin-right: 12px;
}

/* Fokus */
.details-panel select:focus,
.massen-edit-container select:focus {
  outline: none;
  border-color: #64c1fa;
  box-shadow: 0 0 0 3px rgba(100,193,250,.2);
}

/* Allgemeiner „Reset“ für Optionen (wirkt v. a. bei Listbox) */
.details-panel select option,
.massen-edit-container select option {
  display: block;
  font-size: 14px;
  padding: 6px 6px;            /* minimaler seitlicher Abstand */
  line-height: 1.5;
  margin: 0;
  border-radius: 0;
}

/* Optional: eigener Pfeil (kannst du entfernen) */
.details-panel select,
.massen-edit-container select  {
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}


#massen-edit-container {
  display: none;
}

#massen-edit-container.is-open {
  display: flex;
}

#leads-edit-all.aktive {
  display: inline-block;
  height: 32px;
  opacity: 0.5;
}

/* ================================
   READONLY / DISABLED – Details Panel
   ================================ */
.details-panel
input[readonly],.details-panel
textarea[readonly],.details-panel
select[disabled],.details-panel
input[disabled],.details-panel
textarea[disabled],.details-panel
input[readonly]:focus,.details-panel
textarea[readonly]:focus,.details-panel
select[disabled]:focus,.details-panel
input[disabled]:focus,.details-panel
textarea[disabled]:focus,.details-panel
input[readonly]:hover,.details-panel
textarea[readonly]:hover,.details-panel
select[disabled]:hover,.details-panel
input[disabled]:hover,.details-panel
textarea[disabled]:hover {
  background-color: #f9fafb;
  border: 1px solid #f1f1f4;
  color: #333;
  cursor: default;
  pointer-events: auto !important;
  box-shadow: none !important;
  outline: none !important;
  user-select: text;
  overflow-y: auto;
}
/* readonly Toggle klarer zeigen */
.toggle-container.is-readonly {
  opacity: .65;
  cursor: not-allowed;
}
.toggle-container.is-readonly .toggle-slider,
.toggle-container.is-readonly .toggle-knob {
  cursor: not-allowed;
}
/* falls es einen Trigger neben dem Feld gibt: */
.details-panel .dtp-input.is-readonly + button,
.details-panel .dtp-input.is-readonly ~ button,
.details-panel .dtp-input.is-readonly + .dtp-trigger,
.details-panel .dtp-input.is-readonly ~ .dtp-trigger,
.details-panel .dtp-input.is-readonly + .input-group-append,
.details-panel .dtp-input.is-readonly ~ .input-group-append {
  pointer-events: none !important;
  opacity: .6;
}

/* der Status-Select bekommt dynamisch eine Klasse status--<slug> */
#status { transition: background-color .2s ease; }

/* Farben laut Vorgabe */
#status .opt0, #status.opt0 { background-color:#ffffff; }
#status .opt1, #status.opt1 { background-color:#64c1fa; }
#status .opt2, #status.opt2 { background-color:#ffefbf; }
#status .opt3, #status.opt3 { background-color:#ffcf3f; }
#status .opt4, #status.opt4 { background-color:#ffdf7f; }
#status .opt5, #status.opt5 { background-color:#ffb450; }
#status .opt6, #status.opt6 { background-color:#52cc74; }
#status .opt7, #status.opt7 { background-color:#52cc74; }
#status .opt8, #status.opt8 { background-color:#52cc74; }
#status .opt9, #status.opt9 { background-color:#00bf2f; }
#status .opt10, #status.opt10 { background-color:#ff0000; color:#fff;}
#status .opt11, #status.opt11 { background-color:#ff0000; color:#fff;}
#status .opt12, #status.opt12 { background-color:#ff0000; color:#fff;}
#status .opt13, #status.opt13 { background-color:#bf0000; color:#fff; }
#status .opt14, #status.opt14 { background-color:#bf0000; color:#fff; }
#status .opt15, #status.opt15 { background-color:#bf0000; color:#fff; }
#status .opt16, #status.opt16 { background-color:#ffeb52; }
#status .opt17, #status.opt17  { background-color:#ffeb52; }
#status .opt18, #status.opt18 { background-color:#ff7f66; }
#status .opt19, #status.opt19 { background-color:#ff00bf;color:#fff; }
#status .opt20, #status.opt20 { background-color:#ff00bf;color:#fff; }
#status .opt21, #status.opt21 { background-color:#ff00bf; color:#fff;}
#status .opt22, #status.opt22 { background-color:#ff00bf; color:#fff;}
#status .opt23, #status.opt23 { background-color:#ff00bf; color:#fff; }
#status  .opt24, #status.opt24 { background-color:#37405b; color:#fff; }
#status .opt25, #status.opt25 { background-color:#37405b; color:#fff; }
#status .opt26, #status.opt26 { background-color:#ffefbf; }

/* ===========================
   DARK THEME OVERLAYS (ohne Variablen)
   aktiv durch: <body class="theme-dunkel">
   =========================== */


.theme-dunkel { color-scheme: dark; }

/* Body/Hintergrund & Grundtypografie */
.theme-dunkel body {
  background-color: #0b1020;
  background-image: none;
  color: #e5e7eb;
}
.theme-dunkel a, .theme-dunkel a:visited { color: #9ab4ff; }
.theme-dunkel a:hover, .theme-dunkel a:focus { color: #c7d6ff; }
.theme-dunkel p, .theme-dunkel span { color: #e5e7eb; background-color: transparent; }

/* Login-Box & Haupt-Container */
.theme-dunkel .anmelden { background-color: rgba(16,22,42,.6); color: #e5e7eb; }
.theme-dunkel .box { background-color: #0f1528; color: #e5e7eb; border: 1px solid #22283a; }

/* Top-Leiste */
.theme-dunkel .box .topleiste { background-color: #10162a; }
.theme-dunkel .topleiste .userdata { color: #e5e7eb; }
.theme-dunkel .topleiste .userdata .logout { background-color:#5b8cff; border-color:#5b8cff; color:#0b1020; }

/* Seitenmenü */
.theme-dunkel .menu {
  background-color: #0f1528; color: #e5e7eb;
  border: 1px solid #22283a; box-shadow: 0 5px 15px rgba(0,0,0,.25);
}
.theme-dunkel .menu ul li { border-bottom: 1px solid #22283a; }
.theme-dunkel .menu ul li a { color: #e5e7eb; }
.theme-dunkel .menu ul li a:hover,
.theme-dunkel .menu ul li a.active { background-color: #10162a; }
.theme-dunkel .menu ul li img { filter: brightness(1.1); }

/* Suche */
.theme-dunkel .search-container input[type="text"]{
  background-color:#151b2e; border-color:#22283a; color:#e5e7eb;
}
.theme-dunkel .search-container input[type="text"]:focus{
  border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.22);
}
.theme-dunkel .search-container .search-icon{ opacity:.8; filter: invert(1) brightness(1.1); }

/* Tabellen-Container + Tabelle */
.theme-dunkel .tabelle{ background:#0f1528; }
.theme-dunkel .tabelle th, 
.theme-dunkel .tabelle td{ border-color:#22283a; color:#e5e7eb; }
.theme-dunkel .tabelle .bigtable thead th{
  background:#10162a; border-bottom:1px solid #2a3350; box-shadow:0 1px 3px rgba(0,0,0,.5); color:#9aa3b2;
}
.theme-dunkel .tabelle th,
.theme-dunkel .tabelle thead tr{ color:#9aa3b2; background-color:#10162a; }
.theme-dunkel .tabelle table tr:nth-child(odd){ background-color:#0f1424; }
.theme-dunkel .tabelle table tr:nth-child(even){ background-color:#0b1020; }
.theme-dunkel tbody tr:hover { background:#1a2139; }

/* aktive Tabellenzeile */
.theme-dunkel tbody tr.active-tr{
  outline:1px solid #5b8cff !important;
  background-color:rgba(91,140,255,.12) !important;
}
.theme-dunkel tbody tr input.editable-input:focus{ outline:1px solid #5b8cff !important; }

/* Ergebnis-/Stats-Tabelle */
.theme-dunkel #resultTable tr{ background:transparent; }
.theme-dunkel #resultTable td{ color:#e5e7eb; }

/* Gruppierung */
.theme-dunkel tr.group-row{ background:#141b2e; }
.theme-dunkel tr.group-row td{ color:#e5e7eb; }
.theme-dunkel tr.group-child{ background:#0f1528; }
.theme-dunkel .group-row:hover{ background:#1a2139; }
.theme-dunkel .group-child:hover{ background:#141b2e; }
.theme-dunkel .grp-caret::before{ border-left-color:#c7d2fe; }
.theme-dunkel .group-count{ background:#2a3350; color:#e5e7eb; }

/* Panel rechts */
.theme-dunkel #detailsPanel{
  background:#0f1528; color:#e5e7eb; box-shadow:0 4px 15px rgba(0,0,0,.45); border-left:1px solid #22283a;
}
.theme-dunkel .details-panel .tab{ background:#151b2e; color:#e5e7eb; }
.theme-dunkel .details-panel .tab.active,
.theme-dunkel .details-panel .tab:hover{ background:#10162a; color:#fff; }

/* Form Controls im Panel */
.theme-dunkel .details-panel input[type="email"],
.theme-dunkel .details-panel input[type="number"],
.theme-dunkel .details-panel input[type="search"],
.theme-dunkel .details-panel input[type="text"],
.theme-dunkel .details-panel input[type="tel"],
.theme-dunkel .details-panel input[type="url"],
.theme-dunkel .details-panel input[type="password"],
.theme-dunkel .details-panel textarea,
.theme-dunkel .details-panel input[type="date"]{
  background-color:#151b2e; border:1px solid #22283a; color:#e5e7eb;
}
.theme-dunkel .details-panel input[type="email"]:focus,
.theme-dunkel .details-panel input[type="number"]:focus,
.theme-dunkel .details-panel input[type="search"]:focus,
.theme-dunkel .details-panel input[type="text"]:focus,
.theme-dunkel .details-panel input[type="tel"]:focus,
.theme-dunkel .details-panel input[type="url"]:focus,
.theme-dunkel .details-panel input[type="password"]:focus,
.theme-dunkel .details-panel textarea:focus,
.theme-dunkel .details-panel input[type="date"]:focus{
  border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.22); outline:none;
}

/* Datepicker-Indikator in Dark sichtbar */
.theme-dunkel .details-panel input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
}

/* Select im Panel */
/* DARK: Select im Panel – eigener Pfeil, natives Icon ausblenden */
.theme-dunkel .details-panel select{
  background-color:#151b2e !important;
  color:#e5e7eb !important;
  border:1px solid #22283a;
  height:32px;
  padding:4px 28px 4px 8px;           /* Platz für Pfeil rechts */
  /* natives Icon weg */
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  /* eigener Pfeil (hellgrau) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20' fill='none' stroke='%23c1c8d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:10px 10px;
}

/* Windows/IE/Legacy Edge: Expand-Button ausblenden */
.theme-dunkel .details-panel select::-ms-expand{ display:none; }

/* Fokus */
.theme-dunkel .details-panel select:focus{
  outline:none; border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.22);
}

/* Dropdown-Optionen im Dark */
.theme-dunkel .details-panel select option{
  background:#151b2e;
  color:#e5e7eb;
}

/* Statusfarben – Weißtext wo nötig */
.theme-dunkel #status { color:#0b1020; }
.theme-dunkel #status .opt10,
.theme-dunkel #status .opt11,
.theme-dunkel #status .opt12,
.theme-dunkel #status .opt13,
.theme-dunkel #status .opt14,
.theme-dunkel #status .opt15,
.theme-dunkel #status .opt19,
.theme-dunkel #status .opt20,
.theme-dunkel #status .opt21,
.theme-dunkel #status .opt22,
.theme-dunkel #status .opt23,
.theme-dunkel #status .opt24,
.theme-dunkel #status .opt25{ color:#fff; }

/* Tabellenkopf-Icons (Marker) */
.theme-dunkel table th .marker{ filter: invert(1) brightness(1.1); opacity:.9; }

/* Hover auf Edit-Felder in Tabellen */
.theme-dunkel tbody tr td input{ background:transparent; color:#e5e7eb; border-color:#22283a; }

/* SSE Status-Badges */
.theme-dunkel .sse-status{ box-shadow:0 6px 16px rgba(0,0,0,.35); }

/* Scrollbars */
.theme-dunkel *{ scrollbar-width: thin; scrollbar-color:#2a3350 transparent; }
.theme-dunkel *::-webkit-scrollbar{ height:10px; width:10px; }
.theme-dunkel *::-webkit-scrollbar-track{ background: transparent; }
.theme-dunkel *::-webkit-scrollbar-thumb{ background:#2a3350; border-radius:10px; }

/* Tabellen-Sonderbereiche */
.theme-dunkel .scrollbar-container{ background:#0f1528; border-top:1px solid #22283a; }
.theme-dunkel .custom-scrollbar{ background:#131a2e; }
.theme-dunkel .scroll-thumb{ background:#415176; }

/* Zeilen-Status */
.theme-dunkel td .readonly-input.field-updated,
.theme-dunkel td.field-updated{ background-color: rgba(82,204,116,.18) !important; }
.theme-dunkel .row-updated{ background-color: rgba(82,204,116,.18) !important; }
.theme-dunkel .row-deleting{ background-color: rgba(255,0,0,.12) !important; }

/* Erste Spalte */
.theme-dunkel .tabelle td:first-child{ color:#e5e7eb; }

/* Filter-Popover Fallback (falls keine fp-dark/fp-light Klasse) */
.theme-dunkel .filter-popover{ background:#10162a; color:#e5e7eb; border-color:#22283a; }

/* Auswahl-Highlight */
.theme-dunkel ::selection{ background: rgba(91,140,255,.35); color:#fff; }


/* ====== Filter Popover: Basis ====== */
.filter-popover{
  position:absolute;
  z-index:10010;                     /* etwas über dtp */
  border-radius:10px;
  min-width:260px;
  max-width:340px;
  padding:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.16);
  border:1px solid #e5e7eb;          /* in dark überschrieben */
  background:#ffffff;
  box-sizing:border-box;
  /* smoother theme switch */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Inhalt & Layout */
.filter-popover .content-string{ display:flex; flex-wrap:wrap; max-width:340px; }
.filter-popover .row {
    display: flex;
    gap: 8px;
    align-items: center;
	justify-content: center;
    margin-bottom: 8px;
}
.filter-popover .row:last-child{ margin-bottom:0; }

/* Controls */
.filter-popover input,
.filter-popover select {
  flex:1 1 auto;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  height:2.25rem;
  line-height:2.25rem;
  box-sizing:border-box;
  font: inherit;
  font-variant-numeric: tabular-nums; /* bessere Zahlen-Optik */
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
}

.filter-popover input[type="text"],
.filter-popover input[type="number"],
.filter-popover select {
  min-height: 36px;
}
/* Number-Inputs lesen sich rechtsbündig meistens besser */
.filter-popover input[type="number"] { text-align:right; }

.filter-popover select.fp-multiselect {
  line-height: 1.35;
  overflow-y: auto;
}

/* Buttons */
.filter-popover .btns{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-popover .btn{
  padding:.55rem .8rem;
  border:1px solid #e5e7eb;
  border-radius:8px;
  cursor:pointer;
  background:#f3f4f6;
  color:#111827;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease, box-shadow .15s ease;
  user-select:none;
}
.filter-popover .btn:hover{ background:#e8eaee; border-color:#d8dbe2; }
.filter-popover .btn:active{ transform:translateY(1px); }
.filter-popover .btn.icon{
  width:32px; min-width:32px;
  padding:0; height:32px; line-height:32px; text-align:center; font-size:18px;
}

/* Aktive Marker (gleiche Logik wie beim Timestamp) */
.filter-popover input.filter-active{ outline-offset:2px; }

/* =================== LIGHT =================== */
.filter-popover.fp-light{
  background:#ffffff;
  color:#111827;
  border-color:#e5e7eb;
  box-shadow:0 14px 40px rgba(0,0,0,.16);
}
.filter-popover.fp-light input,
.filter-popover.fp-light select{
  background:#ffffff; color:#111827; border-color:#e5e7eb;
}
.filter-popover.fp-light input:focus-visible,
.filter-popover.fp-light select:focus-visible{
  outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.filter-popover.fp-light input.filter-active{
  background:#eef6ff; outline:1px solid #2563eb;
}

/* Light Buttons */
.filter-popover.fp-light .btn{
  background:#f3f4f6; color:#111827; border-color:#e5e7eb;
}
.filter-popover.fp-light .btn:hover{
  background:#e8eaee; border-color:#d8dbe2;
}
.filter-popover.fp-light .btn.filter-active,
.filter-popover.fp-light .btn.icon.filter-active{
  background:#2563eb; color:#ffffff; border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* =================== DARK =================== */
.filter-popover.fp-dark{
  background:#10162a;           /* konsistent zum dunklen Picker */
  color:#e5e7eb;
  border-color:#22283a;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  color-scheme: dark;           /* hilft Browsern bei native Controls */
}
.filter-popover.fp-dark input,
.filter-popover.fp-dark select{
  background:#0f1528; color:#e5e7eb; border-color:#22283a;
}
.filter-popover.fp-dark input::placeholder{ color:#9aa3b2; }
.filter-popover.fp-dark select option{ background:#0f1528; color:#e5e7eb; } /* Dropdown-Optionen in Dark */
.filter-popover.fp-dark input:focus-visible,
.filter-popover.fp-dark select:focus-visible{
  outline:none; border-color:#5b8cff; box-shadow:0 0 0 3px rgba(91,140,255,.22);
}
.filter-popover.fp-dark input.filter-active{
  background:rgba(91,140,255,.18); outline:1px solid transparent;
}

/* Dark Buttons */
.filter-popover.fp-dark .btn{
  background:#151b2e; color:#e5e7eb; border-color:#22283a;
}
.filter-popover.fp-dark .btn:hover{
  background:#1a2139; border-color:#2a3350;
}
.filter-popover.fp-dark .btn.filter-active,
.filter-popover.fp-dark .btn.icon.filter-active{
  background:#5b8cff; color:#0b1020; border-color:#5b8cff;
  box-shadow:0 0 0 3px rgba(91,140,255,.22);
}

/* ===== Browser-Unebenheiten ausbügeln ===== */

/* Date-Picker-Indikator in Dark sichtbar halten (Chromium/WebKit) */
.filter-popover.fp-dark input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
}

/* Entfernt native Pfeile in number (optional – reine Optik) */
.filter-popover input[type=number]::-webkit-outer-spin-button,
.filter-popover input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.filter-popover input[type=number]{ -moz-appearance: textfield; }

/* Scrollbar etwas dezenter (optional) */
.filter-popover{ scrollbar-width: thin; scrollbar-color: #c3cad6 transparent; }
.filter-popover.fp-dark{ scrollbar-color:#415176 transparent; }

/* Kleinigkeit: Stats-Linkreihe */
.filter-popover .stats-links{ display:flex; flex-wrap:wrap; gap:6px; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .filter-popover, .filter-popover * {
    transition: none !important;
  }
}
/* =========================
   Core Layout (themenneutral)
   ========================= */
/* Timestamp Felder: Container & Grundlayout */
.dtp-popover {
  display: none;
  position: fixed;
  z-index: 99999;
  background-color: #ffffff;
  width: 340px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}

/* Header */
.dtp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 12px 14px;
}
.dtp-month{ font-weight: 700; text-transform: capitalize; letter-spacing: .2px; }
.dtp-head .dtp-prev,
.dtp-head .dtp-next{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .4rem .6rem;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  transition: background-color .15s ease, color .15s ease, outline-color .15s ease;
}

/* Grid */
.dtp-grid{ display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; padding: 12px 14px 10px; }
.dtp-dow{ text-align: center; font-size: 12px; padding: .25rem 0 .35rem; }
.dtp-days{ display: contents; }

/* Tage */
.dtp-day{
  text-align: center; user-select: none; cursor: pointer;
  padding: .6rem 0; border-radius: 9px;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* Zeit:  [Spalte(H)]  :  [Spalte(M)]   alles NEBENEINANDER */
.dtp-time{
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 14px;
  flex-wrap: nowrap; /* nebeneinander erzwingen */
}
.dtp-time-sep {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  margin-left: .5em;
  margin-right: .5em;
}
/* Spalten (↑, input, ↓) */
.dtp-time-col{
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}


/* Pfeile: (2) feste Breite 30px */
.dtp-arrow{
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease, color .15s ease;
}

/* Inputs */
.dtp-time .dtp-hour,
.dtp-time .dtp-min{
  width: 66px; height: 2.25rem;
  text-align: center; padding: .35rem .5rem;
  border-radius: 8px;
  -moz-appearance: textfield;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dtp-time .dtp-hour::-webkit-outer-spin-button,
.dtp-time .dtp-hour::-webkit-inner-spin-button,
.dtp-time .dtp-min::-webkit-outer-spin-button,
.dtp-time .dtp-min::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Actions */
.dtp-actions{ display: flex; justify-content: space-between; gap: .75rem; padding: 12px 14px; }
.dtp-actions button{
  flex: 1 1 auto; padding: .7rem 1rem; border-radius: 8px; cursor: pointer;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dtp-time-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 360px){
  .dtp-time{ gap: .6rem; }
  .dtp-time .dtp-hour, .dtp-time .dtp-min{ width: 60px; }
}

/* =========================
   THEME: HELL
   ========================= */
.dtp-popover.dtp-light{ background:#ffffff; color:#111827; border:1px solid #e5e7eb; }
.dtp-light .dtp-head{ background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.dtp-light .dtp-head .dtp-prev, .dtp-light .dtp-head .dtp-next{ color:#111827; }

.dtp-light .dtp-head .dtp-prev:hover, .dtp-light .dtp-head .dtp-next:hover{ background:#eff6ff; color:#2563eb; }
.dtp-light .dtp-head .dtp-prev:focus-visible, .dtp-light .dtp-head .dtp-next:focus-visible{
  outline:2px solid #2563eb; outline-offset:2px; background:#eff6ff;
}

.dtp-light .dtp-dow{ color:#6b7280; }
.dtp-light .dtp-day:hover{ background:#eff6ff; }
.dtp-light .dtp-day.today{ box-shadow: inset 0 0 0 2px #2563eb; }
.dtp-light .dtp-day.selected{ background:#2563eb; color:#ffffff; }
.dtp-light .dtp-day.out{ color:#9ca3af; }

.dtp-light .dtp-time{ border-top:1px solid #e5e7eb; }
.dtp-light .dtp-arrow{ border:1px solid #e5e7eb; background:#f9fafb; color:#111827; }
.dtp-light .dtp-arrow:hover{ background:#eef2f7; border-color:#dee6f2; }
.dtp-light .dtp-arrow:active{ transform: translateY(1px); }
.dtp-light .dtp-arrow:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }

.dtp-light .dtp-time .dtp-hour, .dtp-light .dtp-time .dtp-min{
  background:#ffffff; color:#111827; border:1px solid #e5e7eb;
}
.dtp-light .dtp-time .dtp-hour:focus-visible, .dtp-light .dtp-time .dtp-min:focus-visible{
  outline: none; border-color:#2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.dtp-light .dtp-actions{ background:#fafafa; border-top:1px solid #e5e7eb; }
.dtp-light .dtp-actions button{ background:#f3f4f6; color:#111827; border:1px solid #e5e7eb; }
.dtp-light .dtp-actions button:hover{ background:#e8eaee; }
.dtp-light .dtp-actions .dtp-btn-now{ background:#2563eb; color:#ffffff; border-color:#2563eb; }
.dtp-light .dtp-actions .dtp-btn-now:hover{ filter: brightness(0.95); }
.dtp-light .dtp-actions .dtp-btn-now:focus-visible,
.dtp-light .dtp-actions .dtp-btn-clear:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }

/* =========================
   THEME: DUNKEL
   ========================= */
.dtp-popover.dtp-dark{ background:#0b1020; color:#e5e7eb; border:1px solid #22283a; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.dtp-dark .dtp-head{ background:#10162a; border-bottom:1px solid #22283a; }
.dtp-dark .dtp-head .dtp-prev, .dtp-dark .dtp-head .dtp-next{ color:#e5e7eb; }
.dtp-dark .dtp-head .dtp-prev:hover, .dtp-dark .dtp-head .dtp-next:hover{ background:rgba(91,140,255,.18); color:#5b8cff; }
.dtp-dark .dtp-head .dtp-prev:focus-visible, .dtp-dark .dtp-head .dtp-next:focus-visible{ outline:2px solid #5b8cff; outline-offset:2px; }

.dtp-dark .dtp-dow{ color:#9aa0ab; }
.dtp-dark .dtp-day:hover{ background:rgba(91,140,255,.18); }
.dtp-dark .dtp-day.today{ box-shadow: inset 0 0 0 2px #5b8cff; }
.dtp-dark .dtp-day.selected{ background:#5b8cff; color:#0b1020; }
.dtp-dark .dtp-day.out{ color:#7a8290; }

.dtp-dark .dtp-time{ border-top:1px solid #22283a; }
.dtp-dark .dtp-arrow{ border:1px solid #22283a; background:#151b2e; color:#e5e7eb; }
.dtp-dark .dtp-arrow:hover{ background:#1a2139; border-color:#273150; }
.dtp-dark .dtp-arrow:focus-visible{ outline:2px solid #5b8cff; outline-offset:2px; }

.dtp-dark .dtp-time .dtp-hour, .dtp-dark .dtp-time .dtp-min{
  background:#0f1528; color:#e5e7eb; border:1px solid #22283a;
}
.dtp-dark .dtp-time .dtp-hour:focus-visible, .dtp-dark .dtp-time .dtp-min:focus-visible{
  border-color:#5b8cff; box-shadow: 0 0 0 3px rgba(91,140,255,.22);
}

.dtp-dark .dtp-actions{ background:#0f1526; border-top:1px solid #22283a; }
.dtp-dark .dtp-actions button{ background:#151b2e; color:#e5e7eb; border:1px solid #22283a; }
.dtp-dark .dtp-actions button:hover{ background:#1a2139; }
.dtp-dark .dtp-actions .dtp-btn-now{ background:#5b8cff; color:#0b1020; border-color:#5b8cff; }
.dtp-dark .dtp-actions .dtp-btn-now:hover{ filter: brightness(0.98); }

/* decimal mit Euro */ 
.money-field { position: relative; display:inline-block; }
.money-field input { padding-right: 20px !important; text-align: right; }
.money-field::after {
  content: attr(data-currency);
  position: absolute; right: .6em; bottom: -5px;
  transform: translateY(-50%);
  color: #333; pointer-events: none;
  font-size: 14px;
}	
/* Leads. Panel. Tab 1. ZP - Schalter */	
.details-panel .form-row.zp-schalter {
	margin-top: 1em;
}
.details-panel h6 {
	font-size: 15px;
	font-weight: 600;
	padding-left: 0.2em;
	margin-bottom: 0.1em;
}
.details-panel .head-underline {
	width: 100%;
	border-bottom: 1px solid #2f323c;
	margin-bottom: 0.5em;
}

/* Leads. Panel. Tab 1:  send mails button */	
.send-mails h6 {
	font-size: 16px;
	line-height: 2;
	color: #5c6275;
	margin: 0 auto 0.5em;
}
/* Leads. Panel. Tab 1: wenn tarif vorhanden */	
#tarif-block span {
	font-size: 13px;
}
#tarif-block #tarif-gesamtmb {
	font-size: 1.3em;	
}
.top-double {
  border-top: 4px double #2f323c; /* zwei Linien */
  padding-top: .5rem;             /* etwas Luft nach oben */
}
.label-red,
.label-grey {
	display: inline-block;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
}
.label-red,
.notice-red {
	color: #ff0000;
}
.label-grey {
	color: #5c6275;
}
.hr-gray {
  background-color: #f9fafb;
  height: 8px;
  border:none;
}
/* Subpanels, die per Toggle gesteuert werden */
.subpanel-hidden { display: none !important; }
.subpanel-visible { display: block; }
.box-grey {
	background-color: #f9fafb;
    padding: 1em;
}
/* Leads. Tabelle: MB nach Alter */
#tarifpreise-content table{width:100%}
#tarifpreise-content thead, #tarifpreise-content tr{background-color:#fff}
#tarifpreise-content th{color:#676d82;font-size:12px;padding-left:1%; text-align: left; line-height: 2;}
#tarifpreise-content th.width20{width:25%}
#tarifpreise-content td{text-align:right; line-height: 2;padding-right:1%}

/* ----  Toast (info/success/error/warning) ----- */
/* ----  js/page-init.js ----- */
#crmToast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3381ff;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  z-index: 100000;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  max-width: 70vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
#crmToast.is-visible { opacity: 1; }
#crmToast.success { background: #3381ff; }  /* bei Bedarf differenzieren */
#crmToast.info    { background: #3381ff; }

/* ----- Modal (Warnung/Fehler) ----- */
#crmModalWrap { display: none; }
#crmModalWrap.is-visible { display: block; }

#crmModalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 100000;
}

#crmModalDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* gewünschter Hintergrund */
  background: rgba(255, 127, 102, 0.8);
  color: #111;
  backdrop-filter: blur(2px);
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  z-index: 100001;
  min-width: 320px;
  max-width: 80vw;
  text-align: center;
}

#crmModalMessage {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  white-space: pre-wrap; /* \n → Umbruch */
}

#crmModalOK {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: #111;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}


/* ============================================================
   CRM MODAL DIALOG
   ============================================================ */

#crmModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#crmModal {
  background: #1f243b;  
  color: #ffffff;                   
  border-radius: 12px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  animation: crmModalFadeIn 0.18s ease-out;
}

@keyframes crmModalFadeIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- Header ---------- */
.crm-modal-header {
  padding: 16px 18px 10px;
  font-weight: 700;
  font-size: 16px;
}

/* ---------- Body ---------- */
.crm-modal-body {
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
.crm-modal-footer {
  padding: 19px 18px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------- Buttons ---------- */
.crm-modal-footer button {
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  background-color: #1f243b;        /* 🔵 Wunschfarbe */
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.crm-modal-footer button:hover {
  background-color: #262c4a;
}

.crm-modal-footer button:active {
  transform: translateY(1px);
}

.crm-modal-footer button.primary {
  background-color: #262c4a;
}

.crm-modal-footer button.primary:hover {
  background-color: #262c4a;
  opacity: 0.8;
}

/* ----- Loader ----- */
#crmLoader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1f2937;
  color: #fff;
  padding: 16px 20px;
  border-radius: 10px;
  z-index: 100000;
  min-width: 220px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  display: none;
}
#crmLoader.is-visible { display: block; }

.phone-icon {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
}

.attachment-card {
  position: relative;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  background: #fff;
  margin-bottom: 10px;
}

.attachment-main {
  position: relative;
}
/* ----- PDF Upload thumbnails ----- */
.attachment-thumb {
  width: 150px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attachment-thumb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.attachment-thumb--placeholder {
  font-size: 24px;
}

.attachment-menu-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.attachment-menu-toggle:hover {
  background: #e9edf5;
}

.attachment-menu {
  position: absolute;
  top: 32px;
  right: 4px;
  min-width: 140px;
  padding: 4px 0;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: none;
  z-index: 100;
}

.attachment-menu button {
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.attachment-menu button:hover {
  background: #f0f2f7;
}

.attachment-card.attachment-menu-open .attachment-menu {
  display: block;
}

.attachment-meta {
  flex: 1;
  min-width: 0;
}

.attachment-name {
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-info {
  font-size: 12px;
  color: #666;
}
/* Panel-Untertabellen: Scrollbox + sauberes Layout */
.panel-table {
	position: relative;
    max-height: 240px;
    border: 1px solid #e5e6eb;
    padding: 0;
    margin-top: 5px !important;
	margin-bottom: 15px !important;
	overflow-x: auto;
	overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.panel-table.mb-table {
	 max-height: 420px;
}

/* Tabellen-Styling */
.panel-table table {
    width: 100%;
	max-width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: white;
}

/* Zebra-Streifen */
.panel-table table tr:nth-child(2n + 1) {
    background-color: #f9fafb;
}

/* thead */
.panel-table table thead tr {
  background-color: #ffffff !important;
  line-height: 2.8;
}

/* Zellen */
.panel-table td,
.panel-table th {
    border: 1px solid #e5e6eb;
    text-align: left;
    padding: 3px 6px;
	white-space: nowrap;
}
.panel-table th {
	font-weight: 600;
	font-size: 0.95em;
	color: #5c6275;
}
.panel-table td {
	font-weight: 400;
	line-height: 2.4;
}
/* =========================
   Zusatzperson: ZP Context Menu
   Rechtsklick Tooltip "Beziehung aufheben"
   ========================= */
.zp-ctxmenu {
  position: fixed;
  z-index: 99999;
  min-width: 190px;
  background: #fff;
  border: 1px solid #d9dde3;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 6px;
  font-size: 13px;
}

.zp-ctxmenu-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}

.zp-ctxmenu-item:hover {
  background: #f0f6ff;
}

/* =========================
   Duplikate / Panel Tabelle
   ========================= */

/* ID Spalte schmal */
.duplikate-table .table th:nth-child(1),
.duplikate-table .table td:nth-child(1) {
  width: 70px;
}

/* Datum+Uhrzeit: nicht umbrechen */
.duplikate-table .table th:nth-child(2),
.duplikate-table .table td:nth-child(2) {
  width: 155px;
}

/* Status: eher schmal, aber nicht zu klein */
.duplikate-table .table th:nth-child(3),
.duplikate-table .table td:nth-child(3) {
  width: 120px;
}

/* Vorname/Nachname: dürfen umbrechen */
 .duplikate-table .table th:nth-child(4),
 .duplikate-table .table td:nth-child(4),
 .duplikate-table .table th:nth-child(5),
.duplikate-table .table td:nth-child(5) {
  width: 150px;
}

/* Telefonnummer: nicht umbrechen + monospace für bessere Lesbarkeit */
.duplikate-table .table th:nth-child(6),
 .duplikate-table .table td:nth-child(6) {
  width: 160px;
  font-size: 12px;
}

/* Link Styling in ID */
 .duplikate-table a.dupl-open {
  text-decoration: none;
  font-weight: 600;
}
 .duplikate-table a.dupl-open:hover {
  text-decoration: underline;
}

/* aktueller Duplikat-Satz */
 .duplikate-tabl tr.dupl-current td {
  background: #fff4d6;
  font-weight: 600;
}


/* =========================
  Status in der Tabelle
   ========================= */

.status {
  padding: 5px 7px;
  border-radius: 6px !important;
  font-size:13px;
  font-weight:400;
}

.status.offen {
  background:#64C1FA;
}

.status.zugeteilt {
  background:#FFEFBF;
}

.status.angebot {
  background:#FFCF3F;
}

.status.terminiert {
  background:#FFDF7F;
}

.status.nachbearbeitung{
  background:#FFB450;
}

.status.abschluss,
.status.antrag,
.status.policiert {
  background:#52CC74;
}

.status.erledigt {
  background:#00BF2F;
}

.status.fehler,
.status.nicht, 
.status.meldet {
  background:#FF0000;
  color: #ffffff;
}

.status.spam,
.status.reklamation, 
.status.loeschen,
.status.lschen {
  background:#BF0000;
  color: #ffffff;
}

.status.duplikat {
	 background:#ffeb52;
}

.status.rueckstaendig,
.status.rckstndig {
	background:#FF7F66;
	color: #ffffff;
}

.status.br,
.status.antlg,
.status.storno,
.status.ausgezahlt,
.status.ma {
  background:#FF00BF;
  color: #ffffff;
}

.status.versicherte,
.status.vp {
	background:#37405B;
	color: #ffffff;
}

/* =========================
   Filter-Popover Multicheck
   ========================= */

.filter-popover .fp-multicheck {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  min-width: 240px;
  width: 100%;
}

.filter-popover .fp-multi-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 2px 7px;
  margin-bottom: 1px;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  color: #10162a;
  user-select: none;
}

.filter-popover .fp-multi-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
}

.filter-popover .fp-multi-option span {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}
.filter-popover.fp-dark .fp-multi-option span {
	color: #ffffff;
}

.filter-popover .fp-multi-option.opt-offen span,
.filter-popover .fp-multi-option.opt-zugeteilt span ,
.filter-popover .fp-multi-option.opt-angebot span,
.filter-popover .fp-multi-option.opt-terminiert span ,
.filter-popover .fp-multi-option.opt-nachbearbeitung span,
.filter-popover .fp-multi-option.opt-abschluss span,
.filter-popover .fp-multi-option.opt-antrag-gestellt span,
.filter-popover .fp-multi-option.opt-policiert span,
.filter-popover .fp-multi-option.opt-erledigt span,
.filter-popover .fp-multi-option.opt-duplikat span,
.filter-popover .fp-multi-option.opt-duplikat-geloescht span {
	color: #10162a;
}

/* Gewählte Optionen */
.filter-popover .fp-multi-option:has(input:checked) {
  filter: brightness(95%);
  outline: 1px solid rgba(16, 22, 42, 0.35);
}

.filter-popover.fp-dark .fp-multi-option:has(input:checked) {
  filter: brightness(90%);
  outline: 1px solid rgba(255, 255, 255, 0.35);
}


/* =========================
   Statusfarben im Multicheck
   ========================= */

.filter-popover .fp-multi-option.opt-offen {
  background:#64C1FA;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-zugeteilt {
  background:#FFEFBF;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-angebot {
  background:#FFCF3F;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-terminiert {
  background:#FFDF7F;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-nachbearbeitung {
  background:#FFB450;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-abschluss,
.filter-popover .fp-multi-option.opt-antrag-gestellt,
.filter-popover .fp-multi-option.opt-policiert {
  background:#52CC74;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-erledigt {
  background:#00BF2F;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-fehler,
.filter-popover .fp-multi-option.opt-nicht-erreicht,
.filter-popover .fp-multi-option.opt-meldet-sich {
  background:#FF0000;
  color:#ffffff;
}

.filter-popover .fp-multi-option.opt-spam,
.filter-popover .fp-multi-option.opt-reklamation,
.filter-popover .fp-multi-option.opt-loeschen {
  background:#BF0000;
  color:#ffffff;
}

.filter-popover .fp-multi-option.opt-duplikat,
.filter-popover .fp-multi-option.opt-duplikat-geloescht {
  background:#ffeb52;
  color:#10162a;
}

.filter-popover .fp-multi-option.opt-rueckstaendig {
  background:#FF7F66;
  color:#10162a;
}


.filter-popover .fp-multi-option.opt-br-storno,
.filter-popover .fp-multi-option.opt-antlg-storno,
.filter-popover .fp-multi-option.opt-storno,
.filter-popover .fp-multi-option.opt-ausgezahlt,
.filter-popover .fp-multi-option.opt-ma-ausgezahlt {
  background:#FF00BF;
  color:#ffffff;
}

.filter-popover .fp-multi-option.opt-versicherte-person,
.filter-popover .fp-multi-option.opt-vp-abgschl {
  background:#37405B;
  color:#ffffff;
}

.filter-popover .fp-multi-option.opt-leer {
  background:transparent;
  color:inherit;
  border:1px solid rgba(148, 163, 184, 0.45);
}

/* 
1 Nr
2 id
3 datum_uhrzeit
4 telefontermin
5 status
6 leadtyp
7 letzter_anruf
8 vorname
9 nachname
10 gesellschaft
11 tarifname
12 telefonnummer
13 e_mail

14 versicherungsnummer
15 mb_gesamt
16 mb_antlg_storno
17 versicherungsbeginn
18 timestamp_abschluss
19 timestamp_positiv
20 timestamp_negativ
21 timestamp_rueckstaendig
22 besitzer
23 bearbeitern
24 erledigt_barmenia
25 erledigt_ergo
26 erledigt_gothaer */

/* Standard: alles sichtbar, Tabs schalten dann weg */

/* =========================================================
 * Leads Tabs – Spaltensteuerung NUR über data-col-key / data-col
 * (robust gegen neue Spalten & Reihenfolgeänderungen)
 * GLOBALE SPALTENBREITEN (tableWrap + resultTable)
 * ======================================================= */

/* Default */
#tableWrap thead th,
#tableWrap tbody td {
  display: table-cell;
}
/* Helper: alles ausblenden in Tabs */
#tableWrap[class*="tab-"] thead th,
#tableWrap[class*="tab-"] tbody td,
#resultWrap[class*="tab-"] #resultTable td {
  display: table-cell;
}
/* Nr. (Index) */
#tableWrap thead th[data-col-key="nr"],
#tableWrap tbody td[data-col="nr"],
#resultTable td[data-result="nr"] {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: right;
}
/* ID */
#tableWrap thead th[data-col-key="id"],
#tableWrap tbody td[data-col="id"],
#resultTable td[data-result="id"],
#tableWrap thead th[data-col-key="nc"],
#tableWrap tbody td[data-col="nc"],
#resultTable td[data-result="nc"] {
  width: 76px;
  min-width: 76px;
}
#tableWrap #benutzer_fehlzeiten thead th[data-col-key="id"],
#tableWrap  #benutzer_fehlzeiten tbody td[data-col="id"],
#resultTable #benutzer_fehlzeiten td[data-result="id"] {
	  width: 44px;
	  min-width: 44px;
}

/* Datum + Uhrzeit */
#tableWrap thead th[data-col-key="datum_uhrzeit"],
#tableWrap tbody td[data-col="datum_uhrzeit"],
#resultTable td[data-result="datum_uhrzeit"] {
	 width: 144px;
}
#tableWrap thead th[data-col-key="created_at"],
#tableWrap tbody td[data-col="created_at"],
#resultTable td[data-result="created_at"],
#tableWrap thead th[data-col-key="antragsdatum"],
#tableWrap tbody td[data-col="antragsdatum"],
#resultTable td[data-result="antragsdatum"],
#tableWrap thead th[data-col-key="letzter_anruf"],
#tableWrap tbody td[data-col="letzter_anruf"],
#resultTable td[data-result="letzter_anruf"] {
  width: 140px;
}
/* Telefontermin */
#tableWrap thead th[data-col-key="telefontermin"],
#tableWrap tbody td[data-col="telefontermin"],
#resultTable td[data-result="telefontermin"] {
  width: 150px;
}
/* Status */
#tableWrap thead th[data-col-key="status"],
#tableWrap tbody td[data-col="status"],
#resultTable td[data-result="status"] {
  width: 120px;
}
/* Vorname */
#tableWrap thead th[data-col-key="vorname"],
#tableWrap tbody td[data-col="vorname"],
#resultTable td[data-result="vorname"],
#tableWrap thead th[data-col-key="nachname"],
#tableWrap tbody td[data-col="nachname"],
#resultTable td[data-result="nachname"],
#tableWrap thead th[data-col-key="gesellschaft"],
#tableWrap tbody td[data-col="gesellschaft"],
#resultTable td[data-result="gesellschaft"],
#tableWrap thead th[data-col-key="tarifname"],
#tableWrap tbody td[data-col="tarifname"],
#resultTable td[data-result="tarifname"] {
  width: 160px;
}
/* Telefonnummer */
#tableWrap thead th[data-col-key="telefonnummer"],
#tableWrap tbody td[data-col="telefonnummer"],
#resultTable td[data-result="telefonnummer"],
#tableWrap thead th[data-col-key="telefonnummer_2"],
#tableWrap tbody td[data-col="telefonnummer_2"],
#resultTable td[data-result="telefonnummer_2"] {
  width: 160px;
}
/* E-Mail */
#tableWrap thead th[data-col-key="e_mail"],
#tableWrap tbody td[data-col="e_mail"],
#resultTable td[data-result="e_mail"],
#tableWrap thead th[data-col-key="e_mail_2"],
#tableWrap tbody td[data-col="e_mail_2"],
#resultTable td[data-result="e_mail_2"] {
  width: 240px;
}
/* Versicherungsnummer */
#tableWrap thead th[data-col-key="versicherungsnummer"],
#tableWrap tbody td[data-col="versicherungsnummer"],
#resultTable td[data-result="versicherungsnummer"] {
  width: 160px;
}
/* MB gesamt */
#tableWrap thead th[data-col-key="mb_gesamt"],
#tableWrap tbody td[data-col="mb_gesamt"],
#resultTable td[data-result="mb_gesamt"] {
  width: 104px;
}
#tableWrap tbody td[data-col="mb_gesamt"] {
  text-align: right;
}
/* MB antlg. Storno */
#tableWrap thead th[data-col-key="mb_antlg_storno"],
#tableWrap tbody td[data-col="mb_antlg_storno"],
#resultTable td[data-result="mb_antlg_storno"] {
  width: 140px;
  text-align: right;
}
/* Versicherungsbeginn */
#tableWrap thead th[data-col-key="versicherungsbeginn"],
#tableWrap tbody td[data-col="versicherungsbeginn"],
#resultTable td[data-result="versicherungsbeginn"],
#tableWrap thead th[data-col-key="geburtsdatum"],
#tableWrap tbody td[data-col="geburtsdatum"],
#resultTable td[data-result="geburtsdatum"],
#tableWrap thead th[data-col-key="plz"],
#tableWrap tbody td[data-col="plz"],
#resultTable td[data-result="plz"] {
  width: 120px;
}
/* Timestamps */
#tableWrap thead th[data-col-key^="timestamp_"],
#tableWrap tbody td[data-col^="timestamp_"],
#resultTable td[data-result^="timestamp_"] {
  width: 180px;
}
#tableWrap thead th[data-col-key="besitzer"],
#tableWrap tbody td[data-col="besitzer"],
#resultTable td[data-result="besitzer"],
#tableWrap thead th[data-col-key="bearbeitern"],
#tableWrap tbody td[data-col="bearbeitern"],
#resultTable td[data-result="bearbeitern"] {
  width: 160px;
}

/* erledigt_* */
#tableWrap thead th[data-col-key^="erledigt_"],
#tableWrap tbody td[data-col^="erledigt_"],
#resultTable td[data-result^="erledigt_"] {
  width: 155px;
  text-align: center;
}
#tableWrap thead th[data-col-key="eilantrag"],
#tableWrap tbody td[data-col="eilantrag"],
#resultTable td[data-result="eilantrag"] {
  width: 100px;
}
/* Spalten mit Toggles */
#tableWrap thead th[data-col-key="in_bearbeitung"],
#tableWrap tbody td[data-col="in_bearbeitung"],
#resultTable td[data-result="in_bearbeitung"],
#tableWrap thead th[data-col-key="unterschrieben"],
#tableWrap tbody td[data-col="unterschrieben"],
#resultTable td[data-result="unterschrieben"],
#tableWrap thead th[data-col-key="selbstabschluss"],
#tableWrap tbody td[data-col="selbstabschluss"],
#resultTable td[data-result="selbstabschluss"],
#tableWrap thead th[data-col-key="klaerung_intern"],
#tableWrap tbody td[data-col="klaerung_intern"],
#resultTable td[data-result="klaerung_intern"],
#tableWrap thead th[data-col-key="fertig_fuer_ae"],
#tableWrap tbody td[data-col="fertig_fuer_ae"],
#resultTable td[data-result="fertig_fuer_ae"],
#tableWrap thead th[data-col-key="bearbeitet_ae"],
#tableWrap tbody td[data-col="bearbeitet_ae"],
#resultTable td[data-result="bearbeitet_ae"] {
  width: 132px;
}
#tableWrap thead th[data-col-key="sourcelink"],
#tableWrap tbody td[data-col="sourcelink"],
#resultTable td[data-result="sourcelink"] {
  width: 180px;
}
#tableWrap thead th[data-col-key="telefonnummer_korrigiert"],
#tableWrap tbody td[data-col="telefonnummer_korrigiert"],
#resultTable td[data-result="telefonnummer_korrigiert"],
#tableWrap thead th[data-col-key="notizen_backoffice"],
#tableWrap tbody td[data-col="notizen_backoffice"],
#resultTable td[data-result="notizen_backoffice"],
#tableWrap thead th[data-col-key="abgeschickt_an_consurio"],
#tableWrap tbody td[data-col="abgeschickt_an_consurio"],
#resultTable td[data-result="abgeschickt_an_consurio"] {
  width: 280px;
}

#tableWrap thead th[data-col-key="freigegeben"],
#tableWrap tbody td[data-col="freigegeben"],
#resultTable td[data-result="freigegeben"],
#tableWrap thead th[data-col-key="name"],
#tableWrap tbody td[data-col="name"],
#resultTable td[data-result="name"]{
  width: 160px;
}

/* Abrechnungen MA */
#tableWrap thead th[data-col-key="mitarbeiter"],
#tableWrap tbody td[data-col="mitarbeiter"],
#resultTable td[data-result="mitarbeiter"] {
	width: 180px;
}

#tableWrap thead th[data-col-key="abrechnung_von"],
#tableWrap tbody td[data-col="abrechnung_von"],
#resultTable td[data-result="abrechnung_von"],
#tableWrap thead th[data-col-key="abrechnung_bis"],
#tableWrap tbody td[data-col="abrechnung_bis"],
#resultTable td[data-result="abrechnung_bis"] {
  width: 150px;
}
#tableWrap thead th[data-col-key="letzte_abrechnung"],
#tableWrap tbody td[data-col="letzte_abrechnung"],
#resultTable td[data-result="letzte_abrechnung"] {
  width: 150px;
}
#tableWrap thead th[data-col-key="produktion_brutto"],
#tableWrap tbody td[data-col="produktion_brutto"],
#resultTable td[data-result="produktion_brutto"],
#tableWrap thead th[data-col-key="produktion_netto"],
#tableWrap tbody td[data-col="produktion_netto"],
#resultTable td[data-result="produktion_netto"],
#tableWrap thead th[data-col-key="stornoreserve_neu"],
#tableWrap tbody td[data-col="stornoreserve_neu"],
#resultTable td[data-result="stornoreserve_neu"],
#tableWrap thead th[data-col-key="uhrzeit_abschluss"],
#tableWrap tbody td[data-col="uhrzeit_abschluss"],
#resultTable td[data-result="uhrzeit_abschluss"],
#tableWrap thead th[data-col-key="eingereicht_bei"],
#tableWrap tbody td[data-col="eingereicht_bei"],
#resultTable td[data-result="eingereicht_bei"],
#tableWrap thead th[data-col-key="in_klaerung"],
#tableWrap tbody td[data-col="in_klaerung"],
#resultTable td[data-result="in_klaerung"] {
  width: 150px;
}
#tableWrap thead th[data-col-key="antragsteller"],
#tableWrap tbody td[data-col="antragsteller"],
#resultTable td[data-result="antragsteller"],
#tableWrap thead th[data-col-key="storno_brutto"],
#tableWrap tbody td[data-col="storno_brutto"],
#resultTable td[data-result="storno_brutto"] {
  width: 120px;
}
#tableWrap thead th[data-col-key="abzueglich_leadkosten"],
#tableWrap tbody td[data-col="abzueglich_leadkosten"],
#resultTable td[data-result="abzueglich_leadkosten"] {
  width: 170px;
}
#tableWrap thead th[data-col-key="stornoreserve_aus_dieser_abrechnung"],
#tableWrap tbody td[data-col="stornoreserve_aus_dieser_abrechnung"],
#resultTable td[data-result="stornoreserve_aus_dieser_abrechnung"],
#tableWrap thead th[data-col-key="domain"],
#tableWrap tbody td[data-col="domain"],
#resultTable td[data-result="domain"] {
  width: 270px;
}
#tableWrap thead th[data-col-key="leadtyp"],
#tableWrap tbody td[data-col="leadtyp"],
#resultTable td[data-result="leadtyp"],
#tableWrap thead th[data-col-key="web_lead"],
#tableWrap tbody td[data-col="web_lead"],
#resultTable td[data-result="web_lead"] {
  width: 90px;
}
#tableWrap thead th[data-col-key="source"],
#tableWrap tbody td[data-col="source"],
#resultTable td[data-result="source"],
#tableWrap thead th[data-col-key="klick_id_source"],
#tableWrap tbody td[data-col="klick_id_source"],
#resultTable td[data-result="klick_id_source"],
#tableWrap thead th[data-col-key="ort"],
#tableWrap tbody td[data-col="ort"],
#resultTable td[data-result="ort"]{
  width: 150px;
}
#tableWrap thead th[data-col-key="bezahlter_lead"],
#tableWrap tbody td[data-col="bezahlter_lead"],
#resultTable td[data-result="bezahlter_lead"],
#tableWrap thead th[data-col-key="oldninoxid"],
#tableWrap tbody td[data-col="oldninoxid"],
#resultTable td[data-result="oldninoxid"] {
  width: 124px;
}
/* Fehlzeiten */
#tableWrap thead th[data-col-key="von"],
#tableWrap tbody td[data-col="von"],
#resultTable td[data-result="von"],
#tableWrap thead th[data-col-key="bis"],
#tableWrap tbody td[data-col="bis"],
#resultTable td[data-result="bis"],
#tableWrap thead th[data-col-key="typ"],
#tableWrap tbody td[data-col="typ"],
#resultTable td[data-result="typ"] {
  width: 110px;
}
#tableWrap thead th[data-col-key="vertragsstatus_pool"],
#tableWrap tbody td[data-col="vertragsstatus_pool"],
#resultTable td[data-result="vertragsstatus_pool"],
#tableWrap thead th[data-col-key="vertragshinweis_pool"],
#tableWrap tbody td[data-col="vertragshinweis_pool"],
#resultTable td[data-result="vertragshinweis_pool"],
#tableWrap thead th[data-col-key="hinweis_an_chef"],
#tableWrap tbody td[data-col="hinweis_an_chef"],
#resultTable td[data-result="hinweis_an_chef"]{
  width: 180px;
}
#tableWrap thead th[data-col-key="klick_id"],
#tableWrap tbody td[data-col="klick_id"],
#resultTable td[data-result="klick_id"],
#tableWrap thead th[data-col-key="ts_klaerung_intern"],
#tableWrap tbody td[data-col="ts_klaerung_intern"],
#resultTable td[data-result="ts_klaerung_intern"],
#tableWrap thead th[data-col-key="anzahl_nicht_erreicht_mails_gesendet"],
#tableWrap tbody td[data-col="anzahl_nicht_erreicht_mails_gesendet"],
#resultTable td[data-result="anzahl_nicht_erreicht_mails_gesendet"],
#tableWrap thead th[data-col-key="anzahl_rsa_mails_gesendet"],
#tableWrap tbody td[data-col="anzahl_rsa_mails_gesendet"],
#resultTable td[data-result="anzahl_rsa_mails_gesendet"],
#tableWrap thead th[data-col-key="hinweis"],
#tableWrap tbody td[data-col="hinweis"],
#resultTable td[data-result="hinweis"] {
  width: 220px;
}
#tableWrap thead th[data-col-key="anzahl_angebot_mails_gesendet"],
#tableWrap tbody td[data-col="anzahl_angebot_mails_gesendet"],
#resultTable td[data-result="anzahl_angebot_mails_gesendet"]  {
  width: 200px;
}
#tableWrap thead th[data-col-key="storno_bei_naechster_abrechnung_abrechnen"],
#tableWrap tbody td[data-col="storno_bei_naechster_abrechnung_abrechnen"],
#resultTable td[data-result="storno_bei_naechster_abrechnung_abrechnen"] {
  width: 320px;
}
#tableWrap thead th[data-col-key="produktion_bei_naechster_abrechnung_abrechnen"],
#tableWrap tbody td[data-col="produktion_bei_naechster_abrechnung_abrechnen"],
#resultTable td[data-result="produktion_bei_naechster_abrechnung_abrechnen"],
#tableWrap thead th[data-col-key="notizen_kundenangaben"],
#tableWrap tbody td[data-col="notizen_kundenangaben"],
#resultTable td[data-result="notizen_kundenangaben"] {
  width: 350px;
}

/* Modal Dialog 1,2 Jahre Berechnung */
#crm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.crm-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.crm-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  width: 420px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  font-family: inherit;
}
.crm-dialog-title {
  margin: 0;
  padding: 16px 20px;
  background: #1f243b;
  color: #fff;
  border-radius: 10px 10px 0 0;
  font-size: 18px;
}
.crm-dialog-body {
  padding: 20px;
  font-size: 14px;
}
.crm-dialog-actions {
  display: flex;
  gap: 10px;
  padding: 16px 20px 20px;
  justify-content: flex-end;
}
.crm-dialog-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  background: #e6e6e6;
}
.crm-dialog-btn.primary {
  background: #1f243b;
  color: #fff;
}
.crm-dialog-btn.danger {
  background: #b30000;
  color: #fff;
}
/* ============================
   Header: klickbar
   ============================ */
th.th-clickable {
  cursor: pointer;
}

/* ============================
   Header Icons Container
   ============================ */
th .th-icons {
  display: none;
  gap: 4px;
  vertical-align: middle;
  margin-left: 6px;
  position: absolute;
  left: calc(100% - 30px);
  top: 11px;
  width: auto;
  min-width: 24px;
}

/* Icons allgemein */
th .th-icons img[data-role] {
  width: 14px;
  height: 14px;
  opacity: 0.8;
  display: none;           /* Standard: unsichtbar */
  user-select: none;
  pointer-events: none;    /* Klick geht weiter ans TH */
}

.has-active-sort-up .th-icons {
	  display: inline-flex;
}

/* Sichtbar, wenn TH-Klasse aktiv ist */
th.has-active-filter    .th-icons,
th.has-active-sort-up   .th-icons,
th.has-active-sort-down .th-icons,
th.has-active-group     .th-icons {
	display: block;
}

/* Folter + Sortierung */
th.has-active-filter.has-active-sort-up .th-icons img[data-role],
th.has-active-filter.has-active-sort-down .th-icons img[data-role] {
	width: 10px;
    height: 10px;
}

th.has-active-filter    .th-icons img[data-role="filter"],
th.has-active-sort-up   .th-icons img[data-role="sort-up"],
th.has-active-sort-down .th-icons img[data-role="sort-down"],
th.has-active-group     .th-icons img[data-role="group"] {
  display: inline-block;
}

/* Optional: Hover Feedback */
th.th-clickable:hover .th-icons img[data-role] {
  opacity: 1;
}

/* ============================
   Popover Inputs: aktiv markiert
   ============================ */
.filter-active {
  outline-offset: 1px;
}
#zp_table_body tr:hover {
  filter: brightness(0.95);
}
/* ============================
   Tafel
   ============================ */
.tafel-scroll {
  max-height: 85vh;       /* 85% der Bildschirmhöhe */
  overflow-y: auto;       /* vertikaler Scroll */
  overflow-x: hidden;
  padding: 10px;
}

/* optional: schöner Scrollbar (Firefox + Chrome) */
.tafel-scroll {
  scrollbar-width: thin;
}

.tafel-scroll::-webkit-scrollbar {
  width: 8px;
}
.tafel-scroll::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 6px;
}
.tafel label.w7m {
	width: 5.25%;
	margin-left: 0;
	margin-right: 0.5%;
}
.tafel label.w8m {
	width: 5.75%;
	margin-left: 0;
	margin-right: 0.5%;
}
.tafel label.w8m:nth-child(even) {
	margin-right: 0.5%;
}
.tafel label.w11,
.tafel label.w12 {
	margin-right: 0.5%;
}
.tafel .ma-block.w11,
.tafel .ma-block.w12 {
	margin-right: 0.5%;
}
.ma-row-total,
.ma-row-umsatz,
.ma-row-values {
	display: flex;
	flex-wrap: wrap;
}
.ma-row-total label,
.ma-row-umsatz label,
.ma-row-values label {
	width: 48%;
}
.ma-row-total label:first-child,
.ma-row-umsatz label:first-child,
.ma-row-values label:first-child {
	margin-right: 4%;
}
.tafel .week-head-col {
	padding-top: 15px;
} 
.tafel .week-head-row {
	margin-bottom: 15px;
}
.tafel .week-head-row h5 {
	line-height: 1.75;
    margin-bottom: 0;
}

.monat .ma-block.w16m,
.jahr .ma-block.w16m {
	width: 16%;
    margin: 0 0.3%;
}
.monat .ma-row-values label,
.jahr .ma-row-values label {
  width: 32%;
  margin-right: 2%;
}
.monat .ma-row-values label:last-child,
.jahr .ma-row-values label:last-child {
	margin-right: 0;
}
.monat .week-head-row h5,
.jahr .week-head-row h5 {
  font-size: 1.3em;
  line-height: 1.88em;
  margin-bottom: 0;
}
.tafel .monat .week-head-col,
.tafel .jahr .week-head-col {
	padding-top: 45px;
} 
.bottline {
	color: #444444;
	font-size: 15px;
	line-height: 2;
	text-align: center;
	border-bottom: 1px solid #444444;
}
.tafel .bottline {
	font-size: 11px;
	margin-right: 0.5%;
}
.tafel-backoffice .bottline,
.tafel-backoffice .bottline2 {
	margin-left: 0.5%;
	margin-right: 0.5%;
}
.tafel-backoffice .bottline2 {
   max-height: 32px;
   line-height: 2;
   border-bottom: 3px double #444444;
}
.tafel-backoffice .boxgruen {
   max-height: 32px;
   line-height: 2;
   color: #ffffff;
   background-color: #52CC74;
   border: 3px double #007F1F;
   text-align: center;
   margin-left: 0.5%;
   margin-right: 0.5%;
}
/* Chrome, Edge, Safari */
.tafel input[type="number"]::-webkit-outer-spin-button,
.tafel input[type="number"]::-webkit-inner-spin-button,
.tafel-backoffice input[type="number"]::-webkit-outer-spin-button,
.tafel-backoffice input[type="number"]::-webkit-inner-spin-button,
.panel-abrechnungen-ma input[type="number"]::-webkit-outer-spin-button,
.panel-abrechnungen-ma input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  text-align: right;
}

/* Firefox */
.tafel input[type="number"],
.tafel input[type="text"],
.tafel-backoffice input[type="number"],
.panel-abrechnungen-ma input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: right;
}
.tafel .topline,
.tafel-backoffice .topline,
.tafel-pool-faktor .topline {
	margin-bottom: 0.5em;
}
.tafel .topline h5,
.tafel-backoffice .topline h5,
.tafel-pool-faktor .topline h5 {
  font-size: 1.2em;
  margin-bottom: 0;
  font-weight: 500; 
  color: #ffffff;
  background-color: #5696cf;
  border: 3px double #ffffff;
  border-radius: 3px;
  padding: 0.5em 2em;
}
.tafel .tafel-gesamt {
  min-width: 400px;
  margin: 0 20px 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
}
.panel-abrechnungen-ma .w14m {
	width: 13%;
    margin: 0 0.5%;
}
.panel-abrechnungen-ma .w16m {
	width: 15%;
    margin: 0 0.5%;
}
.ma-stats-head .w9m {
  width: 8.5%;
  margin: 0 0.25%;
}
.ma-stats-head .w10 {
	margin: 0 0.35%;
} 
.tafel-samstagsarbeit {
	max-width: 500px;
}
.tafel-samstagsarbeit .toggle-container {
	margin: 5px auto;
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
}
.tafel-samstagsarbeit .toggle-container .toggle-label {
	display: none;
}
.tafel-samstagsarbeit span.ma {
	font-size: 15px;
	line-height: 2.6;
}
.tafel-samstagsarbeit .grey-bg {
	background-color: #f9fafb;
}
/* Rekorde sollen NICHT absolut liegen */
.rekorde {
  position: relative !important; /* überschreibt evtl. absolute */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100%;
  margin: 16px 0 0 0;
  padding: 14px 14px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Head */
.rekorde .rekorde-head {
	margin: 0 0 10px 0;
	text-align: center;
	background-color: #fada33;
	border: 5px solid #f00;
}
.rekorde .rekorde-head h3 {
	color: #f00;
	font-size: 20px;
	line-height: 2;
	margin: 0;
}
.rekorde .rhead {
	text-align: center;
	background-color: #fada33;
}
.rekorde .rhead h5 {
	color: #f00;
	font-size: 18px;
	line-height: 1.8;
	margin: 0;
}
.rekorde span {
	padding: 0;
}
/* Inhalte wie deine form-row ausrichten */
.rekorde .rekorde-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin-bottom: 10px;
}
/* Labels sollen wie in deinen Form-Reihen funktionieren */
.rekorde .rekorde-tag label {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
/* Inputs (optional, nur falls es bei dir anders aussieht) */
.rekorde .rekorde-tag input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
/* Falls irgendein Parent absolute/transform Layout triggert, stellt sicher:
   Der Block bleibt im normalen Dokumentfluss */
#hauptbereich .rekorde {
  float: none !important;
  clear: both;
}
@media only screen and (max-width: 550px) {
	.menu-left {
  		max-height: 90vh;
		min-width: 180px;
		padding-left: 0;
	}
	.details-panel .ma-row-head.no-view-mobile,
	.details-panel .ma-row-umsatz.no-view-mobile,
	.details-panel .week-head-col.no-view-mobile,
	.details-panel hr.no-view-mobile,
	.rekorde.no-view-mobile {
		display: none;
	}
	.tafel .tafel-gesamt {
		padding: 10px;
		min-width: 200px;
		overflow-x: visible;
	}
	
	.ma-block.w12 {
		width: 98%;
		margin: 0 1% 20px;
		display: flex;
  		flex-direction: column;
	}
	
	.mitarbeiter-bloecke .ma-block .ma-row-name { order: 1; }
	.mitarbeiter-bloecke .ma-block  .ma-row-total { order: 2; }
	
	.tafel .tafel-gesamt > label,
	.tafel .tafel-gesamt > button {
	  width: 45%;
	  margin-left: 0;
	  margin-right: 5%;
	  min-width: 80px;
	}
	.tafel label.w7m,
	.tafel label.w8m {
	  width: 45%;
	  margin-left: 0;
	  margin-right: 5%;
	}
	.tafel .title-row {
		width: 100% !important;
	}
	.tafel .tabelle  {
		margin-bottom: 3em;
	}
	.tafel-scroll {
  		max-height: 50vh;
	}
}
.betreffe h6 {
	font-weight: 500 !important;
}
#nachrichtenportal-abstimmung-ausgabe label,
#tab-empfaenger label {
	margin-bottom: 6px;
}
.nachrichtenportal-status {
	color:  #5493cb;
}
.nachrichtenportal-status.nachrichtenportal-status-gelesen {
	color: #0041a8;
}
.nachrichtenportal-status.nachrichtenportal-status-bestaetigt {
	color: green;
}

#nachrichtenportal input.crm {
  background:#FFEFBF;
  border-radius: 6px !important;
}

#nachrichtenportal input.technik {
  background:#FFCF3F;
	 border-radius: 6px !important;
}

#nachrichtenportal input.gesellschaften {
  background:#FFDF7F;
	 border-radius: 6px !important;
}

#nachrichtenportal input.allgemeines {
  background:#FFB450;
	 border-radius: 6px !important;
}

#nachrichtenportal input.teamevents {
  background:#52CC74;
	 border-radius: 6px !important;
}

#nachrichtenportal input.incentives {
 background:#BF0000;
  color: #ffffff;
	 border-radius: 6px !important;
}

#nachrichtenportal input.sonstiges {
background: #37405B;
  color: #ffffff;
	 border-radius: 6px !important;
}

#nachrichtenportal input.vertragliches {
	 background:#ffeb52;
	 border-radius: 6px !important;
}

.backup-table-scroll {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    overflow-x: auto;
}

.backup-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.backup-table-scroll thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
}