html {
	font-size: 14px;
}

form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

input[readonly], textarea[readonly] {
      background-color: #f0f0f0;  /* Grauer Hintergrund */
      cursor: not-allowed;       /* Zeigt an, dass das Feld nicht bearbeitet werden kann */
    }

input[type="date"] {
    max-width: 250px; /* Oder eine andere gewünschte Breite */
    width: 100%; /* Damit es sich bei kleineren Viewports anpasst */
}

input[type="datetime-local"] {
    max-width: 250px; /* Oder eine andere gewünschte Breite */
    width: 100%; /* Damit es sich bei kleineren Viewports anpasst */
}

/* Ab hier werden Bootstrap CSS überschrieben */

.row {
	margin-bottom: 20px;
}

.card {
	border: none;
	flex-grow: 1;
}

.card-header {
	background-color: white;
	border-bottom: none;
	font-weight: 600;
}

.card-title a {
    text-decoration: none;
    color: inherit;
}

.content {
	background: linear-gradient(135deg, #f5f7fa, #c3cfe2); /* Sanfter Farbverlauf */
    color: #333; /* Dunkler Text für gute Lesbarkeit */
    padding: 10px; /* Innenabstand für den Inhalt */
}

.form-label {
	font-weight: 500;
}

/* Ab hier eigene CSS */

.nav-link-content-available {
    color: #084298;/*#0a58ca*/
}

.nav-link-content-not-available {
    color: #adb5bd;/*#adb5bd*/
}

.no-border-top td, .no-border-top th {
	border-bottom-style: none !important;  /* Entfernt die obere Border vollständig */
}

/* Setzt die Breite der Buttons auf 100%, damit sie die gleiche Breite wie der breiteste Button haben */
ul.dropdown-menu .btn {
	width: 100%; /* Alle Buttons haben die gleiche Breite */
	text-align: left; /* Optional: für besseren Textfluss */
	border: none; /* Verhindert die standardmäßige Randanzeige */
}

/* Entfernt den Rahmen und den Fokusrahmen beim Hover und Verlassen */
ul.dropdown-menu .btn:hover,
ul.dropdown-menu .btn:focus,
ul.dropdown-menu .btn:active {
	border: none; /* Kein Rahmen */
	outline: none; /* Kein Fokusrahmen */
	background-color: #f0f0f0 !important; /* Hintergrundfarbe beim Hover */
	color: #333 !important; /* Textfarbe ändern beim Hover */
}

/* Optionaler Hover-Effekt, falls gewünscht */
ul.dropdown-menu .btn:hover {
	background-color: #f0f0f0 !important; /* Beispiel für einen Hover-Effekt */
	color: #333 !important; /* Textfarbe ändern beim Hover */
}


/* Benutzerdefinierte Klasse: Offcanvas-Half */

.offcanvas.offcanvas-x-half {
    width: 80% !important; /* Standardbreite */
}

/* Media Query für größere Geräte */
@media (min-width: 768px) {
    .offcanvas.offcanvas-x-half {
        width: 50% !important; /* Halbe Bildschirmbreite auf größeren Geräten */
    }
}

.offcanvas.offcanvas-x-full {
    width: 80% !important; /* Standardbreite */
}

.offcanvas.offcanvas-y-half {
    height: 80% !important; /* Standardbreite */
}

/* Media Query für größere Geräte */
@media (min-width: 768px) {
    .offcanvas.offcanvas-y-half {
        height: 50% !important; /* Halbe Bildschirmbreite auf größeren Geräten */
    }
}

.offcanvas.offcanvas-y-full {
    height: 80% !important; /* Standardbreite */
}

.background_color_contact { background-color: #ffe5d0 !important;}
.background_color_chance { background-color: #f8d7da !important;}
.background_color_offer { background-color: #c5b3e6 !important;}
.background_color_order { background-color: #ffc107 !important;}
.background_color_order_cancel { background-color: #ea868f !important;}
.background_color_delivery { background-color: #d2f4ea !important;}
.background_color_credit_note { background-color: #ea868f !important;}
.background_color_sales_assistent { background-color: #0dcaf0 !important;}

.background_color_login { background-color: #fff3cd !important;/*#b02a37;*/}
.background_color_businessletter { background-color: #ffe69c !important;}
.background_color_tracking { background-color: #cc9a06 !important;}

/* Deaktiviere alle Bootstrap-Hover-Effekte */
.btn:hover, .btn:focus, .btn:active {
    background-color: inherit !important;   /* Setzt den Hintergrund auf den Standardwert */
    border-color: inherit !important;       /* Setzt die Rahmenfarbe auf den Standardwert */
    color: inherit !important;              /* Setzt die Textfarbe auf den Standardwert */
}

.btnDelete {
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #2c0b0e !important;
	color: white;
	border:1px solid #2c0b0e;
	min-height: 30px;
}

.btnDelete:hover {
	background-color: #2c0b0e !important;
	color: white !important;
	border:1px solid #2c0b0e !important;
	filter: brightness(85%) !important;
}

.btnDelete::before {
	content: '\F78B'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnCancel, .btnClose {
	background-color: #842029 !important;
	color: white;
	border:1px solid #842029;
	min-height: 30px;
}

.btnCancel:hover, .btnClose:hover {
	background-color: #842029 !important;
	color: white !important;
	border:1px solid #842029 !important;
	filter: brightness(85%) !important;
}

.btnNew, .btnAdd, .btnOpen, .btnRefresh, .btnContinue
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #479f76;
	border:1px solid #479f76;
	min-height: 30px;
}

.btnNew:hover, .btnAdd:hover, .btnOpen:hover, .btnRefresh:hover, .btnContinue:hover
{
	background-color: #479f76 !important;
	border:1px solid #479f76 !important;
	filter: brightness(85%) !important;
}

.btnNew::before, .btnAdd::before {
	content: '\F64D'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnOpen::before {
	content: '\F3D8';
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnRefresh::before {
	content: '\F116'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnContinue::before {
	content: '\F138'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnSync::before {
	content: '\F130'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnExport, .btnExportExcel, .btnCsv, .btnImport
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #198754;
	color: white;
	border:1px solid #198754;
	min-height: 30px;
}

.btnExport:hover, .btnExportExcel:hover, .btnCsv:hover, .btnImport:hover
{
	background-color: #198754 !important;
	color: white !important;
	border:1px solid #198754 !important;
	filter: brightness(85%) !important;
}

.btnExport::before {
	 content: '\F1C6'; /* Unicode für das bi-trash3 Icon */
	 font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	 position: absolute;
	 left: 10px; /* Abstand vom linken Rand */
	 top: 50%;
	 transform: translateY(-50%);
	 margin-right: 10px;
 }

.btnExportCSV
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	min-height: 30px;
}

.btnExportCSV::before {
	content: '\F743'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnExportXLS
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	min-height: 30px;
}

.btnExportXLS::before {
	content: '\F76A'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnExportDATANORM
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	min-height: 30px;
}

.btnExportDATANORM::before {
	content: '\F362'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnImport::before {
	content: '\F1BC';
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnImportCsv
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	min-height: 30px;
}

.btnImportCsv::before {
	content: '\F743'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnSave, .btnSync, .btnPrint, .btnConfirm
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #479f76;
	border:1px solid #479f76;
	color: white;
	min-height: 30px;
}

.btnSave:hover, .btnSync:hover, .btnPrint:hover, .btnConfirm:hover
{
	background-color: #479f76 !important;
	border:1px solid #479f76 !important;
	color: white !important;
	filter: brightness(85%) !important;
}

.btnSave::before {
	 content: '\F7D8'; /* Unicode für das bi-trash3 Icon */
	 font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	 font-size: 1rem;/*1.25rem*/
	 position: absolute;
	 left: 10px; /* Abstand vom linken Rand */
	 top: 50%;
	 transform: translateY(-50%);
	 margin-right: 10px;
 }

.btnPrint::before {
	content: '\F501'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;/*1.25rem*/
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnConfirm::before {
	content: '\F633'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;/*1.25rem*/
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnSend
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #479f76;
	border:1px solid #479f76;
	color: white;
	min-height: 30px;
}

.btnSend:hover
{
	background-color: #479f76 !important;
	border:1px solid #479f76 !important;
	color: white !important;
	filter: brightness(85%) !important;
}

.btnSend::before {
	content: '\F6C0'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnMerge
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #a98eda;
	border:1px solid #a98eda;
	min-height: 30px;
}

.btnMerge:hover {
	background-color: #a98eda !important;  /* Dein benutzerdefinierter Hover-Hintergrund */
	border-color: #a98eda !important;      /* Dein benutzerdefinierter Hover-Rand */
	/*color: white !important;   */            /* Dein benutzerdefinierter Hover-Text */
	filter: brightness(85%) !important;     /* Dein benutzerdefinierter Hover-Effekt (Dunkler machen) */
}

.btnMerge::before {
	content: '\F4CF'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnEdit
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	background-color: #a98eda;
	border:1px solid #a98eda;
	min-height: 30px;
}

.btnEdit:hover {
    background-color: #a98eda !important;  /* Dein benutzerdefinierter Hover-Hintergrund */
    border-color: #a98eda !important;      /* Dein benutzerdefinierter Hover-Rand */
    /*color: white !important;   */            /* Dein benutzerdefinierter Hover-Text */
    filter: brightness(85%) !important;     /* Dein benutzerdefinierter Hover-Effekt (Dunkler machen) */
}

.btnEdit::before {
	content: '\F4C9'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnEditStack
{
	background-color: #e2d9f3;
	border:1px solid #e2d9f3;
	min-height: 30px;
}

.btnEditStack:hover
{
	background-color: #e2d9f3 !important;
	border:1px solid #e2d9f3 !important;
	filter: brightness(85%) !important;
}

.btnOrganizer
{
	color: #fff;
    background-color: #052c65;
	border:1px solid #052c65;
	min-height: 30px;
}

.btnOrganizer:hover
{
	color: #fff !important;
    background-color: #052c65 !important;
	border:1px solid #052c65 !important;
	filter: brightness(85%) !important;
}

.btnOrganizerEmail
{
	position: relative;
	padding-left: 30px; /* Platz für das Icon */
	min-height: 30px;
}

.btnOrganizerEmail::before {
	content: '\F694'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}

.btnAI
{
	color: #fff;
    background-color: #17a2b8;
	border:1px solid #17a2b8;
	min-height: 30px;
}

.btnAI:hover
{
	color: #fff !important;
    background-color: #17a2b8 !important;
	border:1px solid #17a2b8 !important;
	filter: brightness(85%) !important;
}

.btnSearch {
    color: #212529 !important; /* Standard-Textfarbe */
    background-color: #f8f9fa !important; /* Hintergrundfarbe von btn-light */
    border: 1px solid #dee2e6 !important; /* Standard-Rahmenfarbe */
    padding: 0.375rem 0.75rem; /* Standard-Padding */
    font-size: 1rem; /* Standard-Schriftgröße */
    border-radius: 0.375rem; /* Abgerundete Ecken */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	min-height: 30px;
}

.btnStandard {
	color: #212529 !important; /* Standard-Textfarbe */
	background-color: #f8f9fa !important; /* Hintergrundfarbe von btn-light */
	border: 1px solid #dee2e6 !important; /* Standard-Rahmenfarbe */
	padding: 0.375rem 0.75rem; /* Standard-Padding */
	font-size: 1rem; /* Standard-Schriftgröße */
	border-radius: 0.375rem; /* Abgerundete Ecken */
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	min-height: 30px;
}

/* Hover-Effekt (dunklerer Farbton) */
.btnSearch:hover {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
	min-height: 30px;
}

/* Active-Effekt (beim Klicken) */
.btnSearch:active, .btnSearch:focus {
    background-color: #dae0e5 !important;
    border-color: #d3d9df !important;
    box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5) !important;
}

/* Deaktivierter Zustand */
.btnSearch:disabled, .btnSearch.disabled {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
    opacity: 0.65;
}

.btnSearchPlus {
	position: relative;
	padding-left: 35px; /* Platz für das Icon */
	min-height: 30px;
}

.btnSearchPlus::before {
	content: '\F62C'; /* Unicode für das bi-trash3 Icon */
	font-family: "bootstrap-icons"; /* Stelle sicher, dass der Font-Name korrekt ist */
	font-size: 1rem;
	position: absolute;
	left: 10px; /* Abstand vom linken Rand */
	top: 50%;
	transform: translateY(-50%);
	margin-right: 10px;
}


/*
.doc_pdf::before{
	content: url('../images/iconmonstr-file-34-24.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
    vertical-align: middle;
}
*/

.doc_file::before{
	content: url('../images/iconmonstr-file-3-24.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.doc_txt::before{
	content: url('../images/iconmonstr-file-20-24.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.doc_excel::before{
	content: url('../images/doc_excel.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.doc_word::before{
	content: url('../images/doc_word.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.doc_picture::before{
	content: url('../images/iconmonstr-picture-1-24.png');
	padding-right: 1px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.doc_pdf:link, .doc_pdf:hover, .doc_pdf:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_excel:link, .doc_excel:hover, .doc_excel:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_word:link, .doc_word:hover, .doc_word:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_picture:link, .doc_picture:hover, .doc_picture:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_excel:link, .doc_excel:hover, .doc_excel:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_txt:link, .doc_txt:hover, .doc_txt:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.doc_file:link, .doc_file:hover, .doc_file:visited {
	color: #3A3A3A;
	text-decoration: none;
}

.one-column-list, .two-column-list, .three-column-list, .four-column-list {
  display: grid;
  gap: 10px; /* optional: Abstand zwischen den Spalten */
	margin: 0;
}

.one-column-list {
	grid-template-columns: 1fr;
}

.two-column-list {
	grid-template-columns: 1fr 1fr;
}

.three-column-list {
  grid-template-columns: 1fr 1fr 1fr;
}

.four-column-list {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.is_invalid {
  border: 1px solid #dc3545; /* Roter Rahmen für ungültiges Feld */
  background-color: #f8d7da; /* Leicht rötlicher Hintergrund für ungültiges Feld */
 
}

/* Spinner ausblenden beim laden der Seite */
#loading {
	display: none !important;
}

#loading.show {
	display: flex !important;
}

.messenger_message {
	width: auto;
	min-width: 70%;
	max-width: 70%;
	min-height: 50px;
	padding: 10px 30px 10px 10px;
	margin: 5px;
	vertical-align: top;	
	border-radius: 20px;
	border: 0;
	position: relative;
}

.messenger_message_in {
	clear: both;
	float: left;
	background-color: aliceblue;
}

.messenger_message_out {
	clear: both;
	float: right;
	color: white;
	background-color: #007bc0;
}

.messenger_message_out a {
	color: white;
}

.messenger_message_in a {
	color: #3a3a3a;
}

.messenger_footer {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.messenger_separator {
    clear: both;
	width: 100%;
    border-bottom: 1px solid #747D8C;
    text-align: center;
    height: 18px;
    margin-bottom: 15px;
}
.messenger_separator span {
    line-height: 15px;
    padding: 0 10px;
    background: white; /* Farbe des Elements darunter */
    display: inline-block;
    margin-top: 10px;
    color: #3A3A3A;
}

.messenger_message_in_highlight {
	animation-name: message_in_highlight;
	animation-duration: 10s;
}

.messenger_message_out_highlight {
	animation-name: message_out_highlight;
	animation-duration: 10s;
}

@keyframes message_in_highlight {
  from {background-color: #20c997;}
  to {background-color: aliceblue;}
}

@keyframes message_out_highlight {
  from {background-color: #20c997;}
  to {background-color: #007bc0;}
}

.note_message {
	color: #3A3A3A;
	background-color: #9bf79d;
}

.note_hint {	
	color: #3A3A3A;
	background-color: #ffe69c;
}

.note_error {	
	color: #3A3A3A;
	background-color: #ea868f;
}

.no_data {
    display: block;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #6c757d; /* Bootstrap Grau für neutrale Nachricht */
    background-color: #f8f9fa; /* Heller Hintergrund für bessere Sichtbarkeit */
    padding: 15px; /* Abstand für bessere Lesbarkeit */
    border-radius: 8px; /* Abgerundete Ecken */
    width: fit-content;
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
}

.no_link {
	text-decoration: none;
	color: inherit;
}

/* Fügt den Text per CSS ein */
.no_data::before {
    content: "Keine Datensätze vorhanden";  
    display: block;
}


.notice-content {
    max-height: 100px; /* Maximale Höhe */
    /* overflow-y: auto; /* Scrollbar anzeigen, wenn Inhalt überläuft */
    padding: 10px; /* Optional, für etwas Abstand im Text */
    word-wrap: break-word; /* Lange Wörter umbrechen */
}

.notice-clamp-2-lines {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Anzahl der Zeilen */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;		
    }

.notice-clamp-4-lines {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* Anzahl der Zeilen */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;    	
    }
    
.notice-clamp-6-lines {
        display: -webkit-box;
        -webkit-line-clamp: 6; /* Anzahl der Zeilen */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;    	
    }
    
.notice-clamp-height-100 {
    max-height: 100px;        /* Maximale H�he in Pixeln */
    overflow: hidden;         /* Verhindert das �berlaufen des Inhalts */
    text-overflow: ellipsis;  /* Zeigt "..." an, wenn der Text abgeschnitten wird */
    white-space: nowrap;
}

.notice-clamp-height-150 {
    max-height: 150px;        /* Maximale H�he in Pixeln */
    overflow: hidden;         /* Verhindert das �berlaufen des Inhalts */
    text-overflow: ellipsis;  /* Zeigt "..." an, wenn der Text abgeschnitten wird */
    white-space: nowrap;
}

.notice-clamp-height-20000 {
    max-height: 200px;        /* Maximale H�he in Pixeln */
	/* overflow: hidden;         Verhindert das �berlaufen des Inhalts */
	overflow-y: auto;
	/* text-overflow: ellipsis;  Zeigt "..." an, wenn der Text abgeschnitten wird */
    /*white-space: nowrap;*/
}

.notice-clamp-height-200 {
	max-height: 200px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	line-clamp: 8; /* für Zukunft / andere Engines */
}


.notice-clamp-height-250 {
    max-height: 250px;        /* Maximale H�he in Pixeln */
    overflow: hidden;         /* Verhindert das �berlaufen des Inhalts */
    text-overflow: ellipsis;  /* Zeigt "..." an, wenn der Text abgeschnitten wird */
	white-space: nowrap;
}

.notice-clamp-height-300 {
    max-height: 300px;        /* Maximale H�he in Pixeln */
    overflow: hidden;         /* Verhindert das �berlaufen des Inhalts */
    text-overflow: ellipsis;  /* Zeigt "..." an, wenn der Text abgeschnitten wird */
	white-space: nowrap;
}

.resultsCount {
	font-weight: normal;
	font-size: 1.0rem;
}

.search-preview {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 1rem;
	background-color: #f8f9fa;
	max-width: 650px;
}
.search-preview small {
	color: #5f6368;
}
.search-preview a {
	color: #1a0dab;
	text-decoration: none;
	font-size: 1.1rem;
	display: block;
	margin-bottom: 4px;
}
.search-preview .description {
	color: #4d5156;
}
.search-preview .price {
	color: #70757a;
	font-size: 0.9rem;
	margin-top: 4px;
}

 /* Timeline Linie */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: #dee2e6; /* Graue Linie */
    transform: translateX(-50%);
}

/* Timeline Container */
.timeline-container {
    position: relative;
    width: 50%;
    padding: 20px;
}

/* Links & Rechts platzierte Elemente */
.timeline-container.left {
    text-align: right;
}

.timeline-container.right {
    text-align: left;
}

/* Timeline Punkte (Icons) */
.timeline-icon {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    transform: translateX(-50%);
    z-index: 2;
}

/* Karten-Styling */
.timeline-card {
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Anpassungen */
@media screen and (max-width: 768px) {
    .timeline::before {
        left: 20px;
    }

    .timeline-container {
        width: 100%;
        padding-left: 50px;
        padding-right: 0;
        text-align: left;
    }

    .timeline-container.left,
    .timeline-container.right {
        text-align: left;
    }

    .timeline-icon {
        left: 20px;
        transform: none;
    }
}

@media (min-width: 992px) {
    .row-cols-lg-7 > * {
        flex: 0 0 calc(100% / 7);
        max-width: calc(100% / 7);
    }
}

.wrapper {
  background-color: none;
	padding: 0;
	margin: 0;
}