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

package/prebuilt-themes/luxtheme-green.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: #ffffff;
+  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 #E3EBF5;
@@ -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: #6e93ff;
 }
+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: #ffffff;
 }
@@ -78,17 +107,24 @@ lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised
   margin-left: 1px;
   margin-right: 1px;
 }
-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: #636D76;
+  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: 6px;
+}
+lux-card .lux-card-content-container > * {
+  margin-bottom: 0;
+}
 lux-card .lux-highlight {
   color: #003366;
 }
@@ -119,10 +162,17 @@ 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(84px + 20px);
+  margin-bottom: 20px;
+}
 lux-chips .lux-chips-autocomplete-icon {
   color: var(--lux-theme-primary-500);
   font-size: 24px;
@@ -150,11 +200,15 @@ 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: 1px;
-  margin-left: 6px;
-  margin-right: 6px;
+  margin-top: -20px;
+  margin-left: 0;
+  margin-right: 0;
   border-radius: 4px;
 }
 .lux-chips-autocomplete-panel mat-option:not(:last-of-type) {
@@ -181,12 +235,24 @@ lux-datetimepicker mat-datepicker-toggle button.mat-button-disabled .mat-button-
   color: #636D76;
 }
 
+.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: 6px;
+  text-align: center;
+}
+
 /*
  * Theming for LUX-Dialog
  */
 .lux-dialog .lux-dialog-title {
   color: #003366;
 }
+.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
@@ -198,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: #003366;
 }
@@ -216,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: #636D76 !important;
 }
+lux-file-list .lux-file-list.lux-file-list-error mat-card-title .lux-card-title-container {
+  color: #ea515a;
+}
+lux-file-list .lux-file-list mat-card {
+  margin: 0 !important;
+}
 
 /*
  * Theming for LUX-File-Progress
@@ -426,21 +501,30 @@ lux-file-progress .lux-file-overlay mat-spinner svg circle {
 /*
  * Theming for LUX-Form-Controls
  */
+.lux-form-control {
+  margin: 0px;
+  min-height: 84px;
+}
+.lux-form-control .lux-label,
+.lux-form-control mat-hint,
+.lux-form-control mat-error {
+  color: #003366;
+}
 .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: #003366;
-}
 
 .lux-form-control-error .lux-form-control-label > * {
   color: #ea515a !important;
 }
-.lux-form-control-error .lux-form-control-container {
-  border-color: #ea515a !important;
+.lux-form-control-error .lux-form-control-container:after {
+  border-bottom: 1px solid #ea515a;
 }
 .lux-form-control-error .lux-form-control-misc > * {
   color: #ea515a !important;
@@ -496,6 +580,16 @@ lux-lookup-combobox mat-select[aria-disabled=false] .mat-select-arrow {
   border-left: 2px solid #ea515a;
 }
 
+/* 
+ * 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
  */
@@ -503,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: #003366;
 }
+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);
 }
 
 /*
@@ -516,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);
 }
 
 /*
@@ -530,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);
 }
 
 /*
@@ -576,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
  */
@@ -648,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: #003366;
 }
@@ -689,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);
@@ -731,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: #003366;
 }
-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: #003366;
 }
-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: #003366;
+}
+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;
@@ -757,6 +874,9 @@ lux-stepper .mat-step-header.lux-step-header-touched .mat-step-icon-selected {
   color: #ffffff;
   background-color: #003366;
 }
+lux-stepper .mat-step-header.lux-step-header-touched lux-step-header {
+  color: #003366;
+}
 lux-stepper .mat-step-header:not(.lux-step-header-touched) .mat-step-icon {
   color: #ffffff;
   background-color: #003366;
@@ -772,11 +892,19 @@ lux-stepper .mat-step-header:not(.lux-step-header-touched) .mat-step-icon-select
 lux-table .lux-row-selected {
   background-color: #E3EBF5;
 }
+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) {
@@ -798,6 +926,17 @@ lux-tile .lux-notification-new {
 lux-tile .lux-highlight {
   color: #0846ff;
 }
+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
@@ -806,6 +945,9 @@ lux-toggle .mat-slide-toggle label {
   color: #003366;
   font-family: "Source Sans Pro", "Helvetica", "Arial", "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: #b3c2d1;
 }
@@ -835,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
 */
@@ -1208,6 +1364,9 @@ lux-list lux-list-item lux-card mat-card:hover {
 lux-chips .mat-standard-chip:focus {
   outline: 1px 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 > * {
@@ -1231,10 +1390,14 @@ lux-form-control .lux-form-control:not(.lux-form-control-disabled).lux-focused .
   height: 2px;
   border-bottom: 2px solid #2E8533;
 }
+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 #ea515a;
+}
 
 /** ########## Datepicker ########## **/
 lux-datepicker mat-datepicker-toggle button:focus {
   outline: 1px dotted #000000 !important;
+  border-radius: 4px;
 }
 lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
@@ -1263,6 +1426,7 @@ lux-datepicker mat-datepicker-toggle .mat-button-focus-overlay {
 /** ########## Datetimepicker ########## **/
 lux-datetimepicker mat-datepicker-toggle button:focus {
   outline: 1px dotted #000000 !important;
+  border-radius: 4px;
 }
 lux-datetimepicker mat-datepicker-toggle .mat-button-focus-overlay {
   display: none;
@@ -1328,9 +1492,13 @@ lux-table th.cdk-keyboard-focused div.mat-sort-header-container {
 }
 .lux-select-panel mat-option:focus {
   outline: 1px dotted #000000 !important;
+  outline-offset: -1px;
+  border-radius: 4px;
 }
 .lux-select-panel mat-option.mat-active {
   outline: 1px dotted #000000 !important;
+  outline-offset: -1px;
+  border-radius: 4px;
 }
 .lux-select-panel mat-option:hover {
   background-color: #e3ebf5 !important;
@@ -1378,9 +1546,13 @@ lux-button button:not([disabled]).mat-fab:focus:not(:hover).mat-primary, lux-but
 /** ########## Autocomplete ########## **/
 .lux-autocomplete-panel mat-option:focus, .lux-chips-autocomplete-panel mat-option:focus {
   outline: 1px dotted #000000 !important;
+  outline-offset: -1px;
+  border-radius: 4px;
 }
 .lux-autocomplete-panel mat-option.mat-active, .lux-chips-autocomplete-panel mat-option.mat-active {
   outline: 1px dotted #000000 !important;
+  outline-offset: -1px;
+  border-radius: 4px;
 }
 .lux-autocomplete-panel mat-option:hover, .lux-chips-autocomplete-panel mat-option:hover {
   background-color: #e3ebf5 !important;
@@ -1710,6 +1882,12 @@ lux-stepper-large .lux-stepper-large-nav-item:not(.lux-active).lux-completed .lu
   --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 4px 0;
+  --lux-theme-form-control-container-padding: 10px 5px 10px 5px;
+  --lux-theme-form-control-misc-margin: 4px 0 2px 0;
+  --lux-theme-form-control-complete-height: 84px;
+  --lux-theme-form-control-buffer: 6px;
+  --lux-theme-form-control-margin: 0px;
   --lux-theme-button-height: 45px;
   --lux-theme-button-fav-height: 45px;
   --lux-theme-outline-color-bright: #ffffff;
@@ -1862,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;
@@ -1932,7 +2131,7 @@ lux-card.lux-card-grow mat-card-content {
 }
 
 .lux-display-none {
-  display: none;
+  display: none !important;
 }
 
 .lux-display-none-important {
@@ -2021,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;
 }
 
@@ -7229,7 +7427,8 @@ lux-app-header lux-menu-trigger button.lux-right-nav-trigger:hover lux-icon, lux
  * Theming for LUX-Button
  */
 lux-button button.lux-button {
-  font-weight: lighter !important;
+  font-weight: normal !important;
+  align-items: center;
 }
 lux-button button.lux-button.mat-button, lux-button button.lux-button.mat-raised-button {
   border-radius: 18px;
@@ -7247,30 +7446,28 @@ lux-button button.lux-button.mat-raised-button.mat-accent:not(.mat-button-disabl
 lux-button button.lux-button.lux-icon-button {
   border-radius: 18px;
   height: 45px;
-  padding-top: 4px;
-  padding-bottom: 2px;
 }
-lux-button button.lux-button.lux-icon-button lux-icon i,
-lux-button button.lux-button.lux-icon-button lux-icon mat-icon {
+lux-button button.lux-button.lux-icon-button lux-icon {
+  line-height: 1;
+}
+lux-button button.lux-button.lux-icon-button lux-icon i {
   font-size: 1em;
 }
+lux-button button.lux-button.lux-icon-button lux-icon mat-icon {
+  font-size: 1.2em !important;
+}
 lux-button button.lux-button.lux-button-rounded {
   border-radius: 16px !important;
   height: 45px;
   width: 45px;
+  font-size: 22px;
+}
+lux-button button.lux-button.lux-button-rounded lux-icon {
+  line-height: 1;
 }
 lux-button button.lux-button.lux-button-rounded lux-icon i,
 lux-button button.lux-button.lux-button-rounded lux-icon mat-icon {
-  font-size: 1.5em;
-}
-
-/**
- * Theming für LUX-Chips
- */
-.lux-chips-autocomplete-panel {
-  margin-left: 6px;
-  margin-right: 6px;
-  border-radius: 4px;
+  font-size: 1.2em !important;
 }
 
 /*
@@ -7296,22 +7493,25 @@ lux-tile h2 {
 lux-tile .lux-highlight {
   color: #003366;
 }
+lux-tile .lux-tile-label {
+  flex-shrink: 1;
+  flex-grow: 0;
+  min-height: 70px;
+  max-height: 70px;
+}
 
 lux-tile .lux-highlight:hover {
   color: #56BD66;
 }
-lux-tile mat-card[class~=lux-cursor] {
-  box-shadow: 0px 2px 1px -1px rgba(0, 51, 102, 0.6), 0px 1px 1px 0px rgba(0, 51, 102, 0.5), 0px 1px 3px 0px rgba(0, 51, 102, 0.4) !important;
-}
 lux-tile mat-card[class~=lux-cursor]:focus {
   outline: 1px dotted #000000 !important;
 }
 lux-tile mat-card[class~=lux-cursor]:hover {
   background-color: white !important;
-  box-shadow: 0px 2px 1px -1px rgba(46, 133, 51, 0.6), 0px 1px 1px 0px rgba(46, 133, 51, 0.5), 0px 1px 3px 0px rgba(46, 133, 51, 0.4) !important;
+  box-shadow: 0px 3px 1px -2px rgba(46, 133, 51, 0.2), 0px 2px 2px 0px rgba(46, 133, 51, 0.14), 0px 1px 5px 0px rgba(46, 133, 51, 0.12);
 }
 lux-tile mat-card[class~=lux-cursor]:hover h2 {
-  color: #56BD66;
+  color: #56bd66;
 }
 
 /* 
@@ -7324,10 +7524,6 @@ lux-tile mat-card[class~=lux-cursor]:hover h2 {
 /*
  * Theming for LUX-Form-Controls
  */
-lux-checkbox .lux-form-control, lux-toggle .lux-form-control, lux-radio .lux-form-control, lux-slider .lux-form-control {
-  margin-right: 4px;
-  margin-left: 4px;
-}
 lux-checkbox .lux-form-control .lux-form-control-label, lux-toggle .lux-form-control .lux-form-control-label, lux-radio .lux-form-control .lux-form-control-label, lux-slider .lux-form-control .lux-form-control-label {
   padding-bottom: 4px;
 }
@@ -7339,13 +7535,9 @@ lux-checkbox .lux-form-control:not(.lux-form-control-disabled) .lux-form-control
 }
 
 .mat-select-value {
-  color: currentColor;
+  color: rgba(0, 0, 0, 0.54);
 }
 
-lux-input .lux-form-control, lux-select .lux-form-control, lux-file-input .lux-form-control, lux-textarea .lux-form-control, lux-autocomplete .lux-form-control, lux-datepicker .lux-form-control, lux-datetimepicker .lux-form-control, lux-chips .lux-form-control {
-  margin-right: 4px;
-  margin-left: 4px;
-}
 lux-input .lux-form-control .lux-form-control-label, lux-select .lux-form-control .lux-form-control-label, lux-file-input .lux-form-control .lux-form-control-label, lux-textarea .lux-form-control .lux-form-control-label, lux-autocomplete .lux-form-control .lux-form-control-label, lux-datepicker .lux-form-control .lux-form-control-label, lux-datetimepicker .lux-form-control .lux-form-control-label, lux-chips .lux-form-control .lux-form-control-label {
   padding-bottom: 4px;
 }
@@ -7367,6 +7559,9 @@ lux-input .lux-form-control-error .lux-form-control-container, lux-select .lux-f
   border-color: #2E8533 !important;
   box-shadow: 0 0 0 2px #ea515a, 0 0 4px 2px #ea515a;
 }
+lux-input .lux-form-control-error .lux-form-control-container:after, lux-select .lux-form-control-error .lux-form-control-container:after, lux-file-input .lux-form-control-error .lux-form-control-container:after, lux-textarea .lux-form-control-error .lux-form-control-container:after, lux-autocomplete .lux-form-control-error .lux-form-control-container:after, lux-datepicker .lux-form-control-error .lux-form-control-container:after, lux-datetimepicker .lux-form-control-error .lux-form-control-container:after, lux-chips .lux-form-control-error .lux-form-control-container:after {
+  border-bottom: 0px;
+}
 lux-input .lux-form-control-error .lux-form-control-misc > *, lux-select .lux-form-control-error .lux-form-control-misc > *, lux-file-input .lux-form-control-error .lux-form-control-misc > *, lux-textarea .lux-form-control-error .lux-form-control-misc > *, lux-autocomplete .lux-form-control-error .lux-form-control-misc > *, lux-datepicker .lux-form-control-error .lux-form-control-misc > *, lux-datetimepicker .lux-form-control-error .lux-form-control-misc > *, lux-chips .lux-form-control-error .lux-form-control-misc > * {
   color: #ea515a !important;
 }
@@ -7386,7 +7581,14 @@ lux-input .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-for
   box-shadow: 0 0 0 2px #2E8533, 0 0 4px 2px #2E8533;
 }
 lux-input .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-select .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-file-input .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-textarea .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-autocomplete .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-datepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-datetimepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after, lux-chips .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-form-control-container:after {
-  border-bottom: 0px;
+  border-bottom: 0px !important;
+}
+lux-input .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-select .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-file-input .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-textarea .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-autocomplete .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-datepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-datetimepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container, lux-chips .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error .lux-form-control-container {
+  border-color: #ea515a !important;
+  box-shadow: 0 0 0 2px #ea515a, 0 0 4px 2px #ea515a;
+}
+lux-input .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-select .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-file-input .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-textarea .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-autocomplete .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-datepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-datetimepicker .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after, lux-chips .lux-form-control:not(.lux-form-control-disabled).lux-focused.lux-form-control-error:after {
+  border-bottom: 0px !important;
 }
 
 .lux-form-control-error .lux-form-control-label > * {
@@ -7399,6 +7601,14 @@ lux-input .lux-form-control:not(.lux-form-control-disabled).lux-focused .lux-for
   color: #ea515a !important;
 }
 
+/*
+ * Theming für LUX-Layout-Form-Row
+ */
+lux-layout-form-row lux-input .lux-form-control, lux-layout-form-row lux-select .lux-form-control, lux-layout-form-row lux-file-input .lux-form-control, lux-layout-form-row lux-textarea .lux-form-control, lux-layout-form-row lux-autocomplete .lux-form-control, lux-layout-form-row lux-datepicker .lux-form-control, lux-layout-form-row lux-datetimepicker .lux-form-control, lux-layout-form-row lux-chips .lux-form-control {
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
 /*
  * Theming für LUX-Checkbox
  */