@ihk-gfi/lux-components-theme 11.11.0 → 13.0.0

package/prebuilt-themes/luxtheme-orange.css

@@ -2,6 +2,31 @@
 /*
   Dieses Partial-SCSS dient der Verwaltung der Farb-Paletten für die LUX-Components.
 */
+/* 
+  Mixins für die Bestimmung der Schatten, um den Components eine "Höhe" zu geben
+  Sortierung erfolgt nach "Material Design Specification" 
+  https://material.io/design/environment/elevation.html#default-elevations
+  und nutzt die "Elevation Sass mixins" von @angular/material/core/style/elevation.scss
+  https://material.angular.io/guide/elevation
+  Wichtig: Hierbei handelt es sich um eine reine optische Elevation.
+  Der z-index wird dadurch nicht verändert!
+
+  Folgenden Components wurden die lux-elevation-z# mixins zugewiesen
+  lux-elevation-z0: (kein Schatten/niedrigste Ebene)
+  - im lux-Master-Detail wird die Card ohne Schatten genutzt, im Header der lux-rounded-Button ohne Schatten
+  lux-elevation-z1: (Strukturierende Elemente ohne Funktion)
+  - lux-card,lux-master-header/-footer/detail-contianer, wegen der geringen Größe Toggle-Thumb,
+  lux-elevation-z2: ("klickbare" Elemente)
+  - lux-buttons (luxRaised/luxRounded), lux-tile, lux-accordion
+  lux-elevation-z4: (Listen/Menüs im cdk-overlay)
+  - lux-message-box, lux-datepicker, lux-datetimepicker, lux-autocomplete, lux-select, lux-menu
+  lux-elevation-z6:
+  - lux-snackbar, lux-app-header
+  lux-elevation-z16:
+  - lux-side-nav (drawer)
+  lux-elevation-z24: (höchste Ebene)
+  - lux-dialog 
+*/
 /*
  * Theming for LUX-App-Content
  */
@@ -24,6 +49,7 @@ lux-app-footer .footerFont {
  */
 lux-app-header .lux-app-header {
   background-color: #9b6100;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
 }
 lux-app-header .lux-app-header .lux-show-border {
   border-left: 1px solid rgba(255, 255, 255, 0.2);
@@ -46,6 +72,9 @@ lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-warn:
 lux-app-header .lux-app-header div.lux-header-action lux-button button.mat-primary:not(.mat-button-disabled) {
   color: #fff3e0;
 }
+lux-app-header .lux-app-header div.lux-header-action lux-button button.lux-button-rounded {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
 lux-app-header .lux-app-header button:not(.mat-primary):not(.mat-warn):not(.mat-accent):not(.lux-button-rounded) {
   color: #000000;
 }
@@ -78,17 +107,24 @@ lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised
   margin-left: 2px;
   margin-right: 2px;
 }
-lux-button button.lux-button.mat-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled, lux-button button.lux-button.mat-fab.mat-button-disabled {
+lux-button button.lux-button.mat-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled, lux-button button.lux-button.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]), lux-button button.lux-button.mat-fab.mat-button-disabled {
   color: rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+lux-button button.lux-button.mat-raised-button:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
 lux-button button.lux-button.lux-icon-button {
   height: 45px;
-  padding-top: 4px;
-  padding-bottom: 2px;
 }
 lux-button button.lux-button.lux-button-rounded {
   height: 45px;
   width: 45px;
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+lux-button button.lux-button.lux-button-rounded.lux-icon-button {
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 /**
@@ -110,6 +146,13 @@ lux-checkbox .mat-checkbox-checked:not(.mat-checkbox-disabled) label span.mat-ch
 lux-card .lux-card-content-container mat-tab-group.lux-tab-group .lux-tabs-notification-icon {
   border-color: #ffffff;
 }
+lux-card .lux-card-content-container {
+  overflow-x: hidden;
+  padding: 4px;
+}
+lux-card .lux-card-content-container > * {
+  margin-bottom: 0;
+}
 lux-card .lux-highlight {
   color: rgba(0, 0, 0, 0.87);
 }
@@ -119,10 +162,27 @@ lux-card .mat-card-subtitle {
 lux-card .lux-card-content-expanded {
   background: #ffffff;
 }
+lux-card .mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
 
 /**
  * Theming für LUX-Chips
  */
+lux-chips {
+  min-height: calc(70px + 20px);
+  margin-bottom: 20px;
+}
+lux-chips .lux-chips-autocomplete-icon {
+  color: var(--lux-theme-primary-500);
+  font-size: 24px;
+  padding-right: 4px;
+  cursor: pointer;
+}
+lux-chips .lux-chips-autocomplete-icon.lux-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+  cursor: default;
+}
 lux-chips .lux-chips mat-chip.mat-chip-selected .mat-chip-remove {
   color: #ffffff !important;
   opacity: 1 !important;
@@ -140,6 +200,20 @@ lux-chips .lux-chips mat-chip.mat-chip-disabled lux-icon i,
 lux-chips .lux-chips mat-chip.mat-chip-disabled lux-icon mat-icon {
   color: #ffffff;
 }
+lux-chips .lux-chips mat-chip-list div.mat-chip-list-wrapper {
+  margin: 0px 0px 0px -4px;
+}
+
+.lux-chips-autocomplete-panel {
+  padding: 2px;
+  margin-top: -20px;
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 4px;
+}
+.lux-chips-autocomplete-panel mat-option:not(:last-of-type) {
+  margin-bottom: 2px;
+}
 
 /*
  * Theming for LUX-Datepicker
@@ -161,12 +235,24 @@ lux-datetimepicker mat-datepicker-toggle button.mat-button-disabled .mat-button-
   color: rgba(0, 0, 0, 0.4);
 }
 
+.lux-datetime-overlay-content mat-card.mat-card {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.lux-datetime-overlay-content mat-card.mat-card lux-input div.lux-form-control {
+  min-height: unset;
+  margin: 4px;
+  text-align: center;
+}
+
 /*
  * Theming for LUX-Dialog
  */
 .lux-dialog .lux-dialog-title {
   color: rgba(0, 0, 0, 0.87);
 }
+.lux-dialog .mat-dialog-container {
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
 
 /*
  * Theming for LUX-Divider
@@ -178,6 +264,9 @@ lux-divider .mat-divider {
 /*
  * Theming for LUX-File-List
  */
+lux-file-list .lux-file-list {
+  margin: 0px;
+}
 lux-file-list .lux-file-list .lux-file-list-entry-label, lux-file-list .lux-file-list .lux-file-list-entry-icon {
   color: rgba(0, 0, 0, 0.65);
 }
@@ -196,6 +285,12 @@ lux-file-list .lux-file-list.lux-file-list-disabled i {
 lux-file-list .lux-file-list.lux-file-list-disabled .lux-file-icon-hint span {
   text-decoration-color: rgba(0, 0, 0, 0.4) !important;
 }
+lux-file-list .lux-file-list.lux-file-list-error mat-card-title .lux-card-title-container {
+  color: #b01211;
+}
+lux-file-list .lux-file-list mat-card {
+  margin: 0 !important;
+}
 
 /*
  * Theming for LUX-File-Progress
@@ -209,24 +304,227 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
   background: #d0a520;
 }
 
+/*
+* Theming für Lux-File-Upload
+*/
+.lux-file-upload-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  /* Die eigentliche File-Inputs und den Download-Anchor blenden wir aus */
+}
+.lux-file-upload-container .lux-file-upload-drop-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  border: 1px solid var(--lux-theme-primary-500);
+  border-radius: 4px;
+  color: var(--lux-theme-primary-500);
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-label-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  padding: 24px 48px;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-progress, .lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-drop-container-no-progress {
+  height: 8px;
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drop-container-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+  background-color: var(--lux-theme-app-data-bg);
+  border: 1px solid var(--lux-theme-dark-disabled-text);
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drop-container-disabled .lux-file-upload-link {
+  cursor: default;
+}
+.lux-file-upload-container .lux-file-upload-drop-container.lux-file-upload-drag-active {
+  background-color: var(--lux-theme-selected-bg-color);
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-icon {
+  display: flex;
+  flex: 0 0 auto;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-label-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-drop-container .lux-file-upload-link {
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+.lux-file-upload-container .lux-file-upload-error-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  border: 1px solid var(--lux-theme-warn-500);
+  border-radius: 4px;
+  color: var(--lux-theme-warn-500);
+  padding: 18px 15px 15px 26px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-icon {
+  display: flex;
+  flex: 0 0 30px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-message {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button {
+  display: flex;
+  flex: 0 0 auto;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 30px;
+}
+.lux-file-upload-container .lux-file-upload-error-container .lux-file-upload-error-button button i {
+  font-size: 24px;
+}
+.lux-file-upload-container .lux-file-upload-hint-container {
+  margin-top: 4px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-no-hint-container {
+  min-height: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+  background-color: var(--lux-theme-selected-bg-color);
+  border: 1px solid var(--lux-theme-accent-500);
+  border-radius: 4px;
+  color: var(--lux-theme-primary-500);
+  padding: 18px 15px 18px 26px;
+  margin-bottom: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container.lux-file-upload-view-item-disabled {
+  color: var(--lux-theme-dark-disabled-text);
+  background-color: var(--lux-theme-app-data-bg);
+  border: 1px solid var(--lux-theme-dark-disabled-text);
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 12px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item .lux-file-upload-view-item-icon {
+  display: flex;
+  flex: 0 0 30px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item .lux-file-upload-view-item-label-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button {
+  display: flex;
+  align-items: center;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 30px;
+}
+.lux-file-upload-container .lux-file-upload-view-item-container .lux-file-upload-view-item lux-button.lux-file-upload-view-item-delete-button button i {
+  font-size: 24px;
+}
+.lux-file-upload-container .lux-file-upload-input {
+  display: none;
+}
+
+.file-upload-dialog-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container {
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: flex-end;
+  align-items: center;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button {
+  display: flex;
+  flex: 0 0 auto;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button {
+  padding: 0;
+  margin: 0;
+  border-radius: 8px;
+  min-width: 40px;
+  min-height: 40px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button i,
+.file-upload-dialog-title-container .file-upload-dialog-close-button-container .file-upload-dialog-close-button button mat-icon {
+  font-size: 30px !important;
+}
+.file-upload-dialog-title-container .file-upload-dialog-title {
+  padding-right: 50px;
+}
+.file-upload-dialog-title-container .file-upload-dialog-content-text {
+  padding-bottom: 30px;
+}
+
+.file-dialog div.mat-dialog-title.lux-dialog-title {
+  font-size: 28px;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+.file-dialog p {
+  margin: 0;
+  padding-top: 12px;
+  padding-bottom: 30px;
+}
+
 /*
  * Theming for LUX-Form-Controls
  */
+.lux-form-control {
+  margin: 0px;
+  min-height: 70px;
+}
+.lux-form-control .lux-label,
+.lux-form-control mat-hint,
+.lux-form-control mat-error {
+  color: rgba(0, 0, 0, 0.65);
+}
 .lux-form-control .lux-form-control-container {
   padding: 6px 0 0 0;
 }
+.lux-form-control .lux-form-control-container input:required, .lux-form-control .lux-form-control-container textarea:required {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
 .lux-form-control .lux-form-control-container:after {
   border-bottom: 1px solid rgba(0, 0, 0, 0.42);
 }
-.lux-form-control .lux-label, .lux-form-control mat-hint, .lux-form-control mat-error {
-  color: rgba(0, 0, 0, 0.65);
-}
 
 .lux-form-control-error .lux-form-control-label > * {
   color: #b01211 !important;
 }
-.lux-form-control-error .lux-form-control-container {
-  border-color: #b01211 !important;
+.lux-form-control-error .lux-form-control-container:after {
+  border-bottom: 1px solid #b01211;
 }
 .lux-form-control-error .lux-form-control-misc > * {
   color: #b01211 !important;
@@ -282,6 +580,16 @@ lux-lookup-combobox mat-select[aria-disabled=false] .mat-select-arrow {
   border-left: 2px solid #b01211;
 }
 
+/* 
+ * Eineheitliche Elevation für die Components auf Cdk-Overlay-Pane
+ */
+.cdk-overlay-pane > .mat-autocomplete-panel:not([class*=mat-elevation-z]),
+.cdk-overlay-pane .mat-datepicker-content,
+.cdk-overlay-pane .mat-select-panel:not([class*=mat-elevation-z]),
+.cdk-overlay-pane .mat-menu-panel {
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
 /*
  * Theming for LUX-Master-Detail
  */
@@ -289,12 +597,19 @@ lux-master-detail .lux-detail-container .lux-detail-empty-icon,
 lux-master-detail .lux-detail-container .lux-detail-empty-icon-text {
   color: rgba(0, 0, 0, 0.87);
 }
+lux-master-detail .lux-master-container.lux-empty-elements-aligned {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
+lux-master-detail lux-list .mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
 
 /*
  * Theming for LUX-Master-Footer
  */
 lux-master-footer {
   background-color: #ffffff;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 /*
@@ -302,6 +617,7 @@ lux-master-footer {
  */
 lux-master-header {
   background-color: #ffffff;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 /*
@@ -316,7 +632,7 @@ lux-master-header {
  * Theming for LUX-Message-Box
  */
 lux-message-box.mat-elevation-z4 {
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }
 
 /*
@@ -362,6 +678,10 @@ lux-message-box.mat-elevation-z4 {
   background-color: transparent;
 }
 
+snack-bar-container.mat-snack-bar-container {
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+
 /*
  * Theming for LUX-Progress
  */
@@ -434,6 +754,9 @@ lux-progress mat-progress-spinner.lux-bg-color-white circle {
   stroke: #ffffff;
 }
 
+lux-radio .mat-radio-container {
+  border-radius: 50%;
+}
 lux-radio .mat-radio-checked label.mat-radio-label .mat-radio-container span.mat-radio-inner-circle {
   background-color: #d0a520;
 }
@@ -475,7 +798,7 @@ lux-select mat-select[aria-disabled=false] .mat-select-arrow {
  */
 lux-side-nav .lux-side-nav {
   background: #ffffff;
-  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 lux-side-nav .lux-side-nav .lux-side-nav-header {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@@ -517,16 +840,24 @@ lux-spinner .mat-progress-spinner > svg > circle {
 /*
  * Theming for LUX-Stepper
  */
+lux-stepper .mat-stepper-horizontal, lux-stepper .mat-stepper-vertical {
+  background-color: transparent;
+}
 lux-stepper .lux-ignore-mat-step-icons mat-step-header {
   color: rgba(0, 0, 0, 0.65);
 }
-lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-edited-icon i, lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-edited-icon mat-icon,
+lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-edited-icon i,
+lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-edited-icon mat-icon,
 lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-normal-icon i,
 lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched .lux-stepper-normal-icon mat-icon {
   color: #ffffff;
   background-color: #d0a520;
 }
-lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-edited-icon i, lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-edited-icon mat-icon,
+lux-stepper .lux-ignore-mat-step-icons mat-step-header.lux-step-header-touched lux-step-header {
+  color: #d0a520;
+}
+lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-edited-icon i,
+lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-edited-icon mat-icon,
 lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-normal-icon i,
 lux-stepper .lux-ignore-mat-step-icons mat-step-header:not(.lux-step-header-touched) .lux-stepper-normal-icon mat-icon {
   color: #ffffff;
@@ -543,6 +874,9 @@ lux-stepper .mat-step-header.lux-step-header-touched .mat-step-icon-selected {
   color: #ffffff;
   background-color: #d0a520;
 }
+lux-stepper .mat-step-header.lux-step-header-touched lux-step-header {
+  color: #d0a520;
+}
 lux-stepper .mat-step-header:not(.lux-step-header-touched) .mat-step-icon {
   color: #ffffff;
   background-color: rgba(0, 0, 0, 0.65);
@@ -558,11 +892,19 @@ lux-stepper .mat-step-header:not(.lux-step-header-touched) .mat-step-icon-select
 lux-table .lux-row-selected {
   background-color: #f1e4bc;
 }
+lux-table table td div.lux-form-control {
+  min-height: 18px;
+}
+lux-table table td div.lux-form-control .lux-form-control-label,
+lux-table table td div.lux-form-control .lux-form-control-misc {
+  display: none;
+}
 
 /*
  * Theming for LUX-Tabs
  */
-lux-tabs .mat-tab-nav-bar, lux-tabs .mat-tab-header {
+lux-tabs .mat-tab-nav-bar,
+lux-tabs .mat-tab-header {
   border-color: rgba(0, 0, 0, 0.2);
 }
 lux-tabs mat-tab-group div[role=tab]:not(.mat-tab-disabled) {
@@ -584,6 +926,17 @@ lux-tile .lux-notification-new {
 lux-tile .lux-highlight {
   color: #ffcc7a;
 }
+lux-tile .mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+lux-tile .lux-tile-label {
+  margin: 0;
+  display: flex;
+  flex-shrink: 1;
+  flex-grow: 0;
+  min-height: 65px;
+  max-height: 65px;
+}
 
 /*
  * Theming for LUX-Toggle
@@ -592,6 +945,9 @@ lux-toggle .mat-slide-toggle label {
   color: rgba(0, 0, 0, 0.87);
   font-family: Roboto, Helvetica Neue, sans-serif;
 }
+lux-toggle .mat-slide-toggle .mat-slide-toggle-thumb {
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+}
 lux-toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
   background-color: #f1e4bc;
 }
@@ -621,6 +977,20 @@ mat-tooltip-component .mat-tooltip {
   font-size: 14px;
 }
 
+/*
+ * Theming for LUX-Accordion
+ */
+mat-expansion-panel.mat-expansion-panel:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
+
+/*
+ * Theming for LUX-Errorpage
+ */
+lux-error-page lux-card:not(.lux-error-page-desktop) .mat-card:not([class*=mat-elevation-z]) {
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
 /*
 * Theming für Lux-Stepper-Large
 */
@@ -668,25 +1038,37 @@ lux-stepper-large {
   font-size: 22px;
   line-height: 1.5;
 }
-.lux-stepper-large-nav-item.lux-active {
-  font-weight: bold;
+.lux-stepper-large-nav-item.lux-active:not(.lux-disabled) .lux-stepper-large-nav-item-number-container {
+  color: #ffffff;
+  background-color: #003366;
 }
-.lux-stepper-large-nav-item.lux-completed {
-  color: #2E8533;
+.lux-stepper-large-nav-item.lux-active:not(.lux-disabled) .lux-stepper-large-nav-item-label {
+  color: #003366;
 }
-.lux-stepper-large-nav-item.lux-completed a {
+.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled) a {
   text-decoration: underline;
 }
-.lux-stepper-large-nav-item.lux-disabled {
-  opacity: 0.6;
-}
-.lux-stepper-large-nav-item.lux-completed .lux-stepper-large-nav-item-number-container {
+.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) .lux-stepper-large-nav-item-number-container {
   color: #ffffff;
   background-color: #2E8533;
 }
-.lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-item-number-container {
+.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled).lux-completed:not(.lux-active) a {
+  color: #2E8533;
+}
+.lux-stepper-large-nav-item.lux-touched:not(.lux-disabled):not(.lux-completed):not(.lux-active) .lux-stepper-large-nav-item-number-container {
   color: #ffffff;
-  background-color: #003366;
+  background-color: #2E8533;
+}
+.lux-stepper-large-nav-item:not(.lux-touched) {
+  opacity: 0.6;
+  color: #003366;
+}
+.lux-stepper-large-nav-item:not(.lux-touched) .lux-stepper-large-nav-item-number-container {
+  color: #003366;
+  background-color: #eff3f6;
+}
+.lux-stepper-large-nav-item.lux-disabled {
+  opacity: 0.6;
 }
 .lux-stepper-large-nav-item.lux-disabled .lux-stepper-large-nav-item-number-container {
   color: #003366;
@@ -982,6 +1364,9 @@ lux-list lux-list-item lux-card mat-card:hover {
 lux-chips .mat-standard-chip:focus {
   outline: 2px dotted #000000 !important;
 }
+lux-chips .mat-chip.mat-standard-chip:after {
+  background-color: unset;
+}
 
 /** ########## Form-Control ########## **/
 lux-form-control .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-label > * {
@@ -1005,10 +1390,14 @@ lux-form-control .lux-form-control:not(.lux-form-control-disabled).lux-focused .
   height: 2px;
   border-bottom: 2px solid #b3790b;
 }
+lux-form-control .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container:after {
+  border-bottom: 2px solid #b01211;
+}
 
 /** ########## Datepicker ########## **/
 lux-datepicker mat-datepicker-toggle button:focus {
   outline: 2px dotted #000000 !important;
+  border-radius: 4px;
 }
 lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
@@ -1037,6 +1426,7 @@ lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay {
 /** ########## Datetimepicker ########## **/
 lux-datetimepicker mat-datepicker-toggle button:focus {
   outline: 2px dotted #000000 !important;
+  border-radius: 4px;
 }
 lux-datetimepicker mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
@@ -1102,9 +1492,13 @@ lux-table th.cdk-keyboard-focused div.mat-sort-header-container {
 }
 .lux-select-panel mat-option:focus {
   outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
+  border-radius: 4px;
 }
 .lux-select-panel mat-option.mat-active {
   outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
+  border-radius: 4px;
 }
 .lux-select-panel mat-option:hover {
   background-color: #f1e4bc !important;
@@ -1150,13 +1544,17 @@ lux-button button:not([disabled]).mat-fab:focus:not(:hover).mat-primary, lux-but
 }
 
 /** ########## Autocomplete ########## **/
-.lux-autocomplete-panel mat-option:focus {
+.lux-autocomplete-panel mat-option:focus, .lux-chips-autocomplete-panel mat-option:focus {
   outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
+  border-radius: 4px;
 }
-.lux-autocomplete-panel mat-option.mat-active {
+.lux-autocomplete-panel mat-option.mat-active, .lux-chips-autocomplete-panel mat-option.mat-active {
   outline: 2px dotted #000000 !important;
+  outline-offset: -2px;
+  border-radius: 4px;
 }
-.lux-autocomplete-panel mat-option:hover {
+.lux-autocomplete-panel mat-option:hover, .lux-chips-autocomplete-panel mat-option:hover {
   background-color: #f1e4bc !important;
   border-radius: 4px;
 }
@@ -1351,16 +1749,32 @@ lux-message-box div.lux-message-box-content div.lux-message-container:not(.lux-b
 }
 
 /** ########## Stepper large ########## **/
-lux-stepper-large a:focus {
+lux-stepper-large .lux-stepper-large-nav-item a:focus {
   outline: none;
 }
-lux-stepper-large a:hover {
-  background-color: #f1e4bc !important;
-  border-radius: 4px;
+lux-stepper-large .lux-stepper-large-nav-item a.lux-focused {
+  outline: 2px dotted #000000 !important;
 }
-lux-stepper-large a.lux-focused {
-  background-color: #f1e4bc !important;
-  border-radius: 4px;
+lux-stepper-large .lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link {
+  cursor: text;
+}
+lux-stepper-large .lux-stepper-large-nav-item.lux-active .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
+  color: unset;
+}
+lux-stepper-large .lux-stepper-large-nav-item:not(.lux-active):not(.lux-completed) .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
+  color: #2E8533;
+}
+lux-stepper-large .lux-stepper-large-nav-item:not(.lux-active).lux-completed .lux-stepper-large-nav-item-label-container a.lux-stepper-large-nav-item-label-link:hover {
+  color: #56BD66;
+}
+
+/** ########## File-Upload ########## **/
+.lux-file-upload-drop-container {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.lux-file-upload-drop-container:focus {
+  outline: 2px dotted #000000 !important;
 }
 
 :root {
@@ -1468,6 +1882,12 @@ lux-stepper-large a.lux-focused {
   --lux-theme-form-control-height-small: 18px;
   --lux-theme-form-control-font-size: 15px;
   --lux-theme-form-control-font-size-small: 12px;
+  --lux-theme-form-control-label-padding: 2px 0 0 0;
+  --lux-theme-form-control-container-padding: 6px 0 0 0;
+  --lux-theme-form-control-misc-margin: 4px 0 2px 0;
+  --lux-theme-form-control-complete-height: 70px;
+  --lux-theme-form-control-buffer: 4px;
+  --lux-theme-form-control-margin: 0px;
   --lux-theme-button-height: 45px;
   --lux-theme-button-fav-height: 45px;
   --lux-theme-outline-color-bright: #ffffff;
@@ -1620,18 +2040,39 @@ h6 {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  padding: 8px;
+  margin: 16px 0;
+  padding: 16px 16px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   display: flex;
-  margin: 0 0 16px 0;
   word-break: break-word;
 }
+.lux-highlight-section.column {
+  flex-direction: column;
+  gap: 16px;
+}
+.lux-highlight-section.row {
+  flex-direction: row;
+  gap: 16px;
+}
 
 .lux-highlight-section-label {
   margin-top: 0;
   margin-left: 0;
 }
 
+.lux-simple-form {
+  margin: 4px 0;
+  display: flex;
+}
+.lux-simple-form.column {
+  flex-direction: column;
+  gap: 16px;
+}
+.lux-simple-form.row {
+  flex-direction: row;
+  gap: 16px;
+}
+
 .lux-app-container {
   flex-direction: column;
   box-sizing: border-box;
@@ -1690,7 +2131,7 @@ lux-card.lux-card-grow mat-card-content {
 }
 
 .lux-display-none {
-  display: none;
+  display: none !important;
 }
 
 .lux-display-none-important {
@@ -1779,7 +2220,6 @@ lux-card.lux-card-grow mat-card-content {
   position: relative;
   margin: 0 !important;
   min-width: unset !important;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   visibility: hidden;
 }