:root {
  --hw-font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --hw-bg: #f6f1eb;
  --hw-surface: #fffaf4;
  --hw-surface-2: #f2e8dc;
  --hw-text: #23201d;
  --hw-muted: #6a6259;
  --hw-border: #dacdbf;
  --hw-primary: #9a3f52;
  --hw-primary-strong: #7e2d3f;
  --hw-primary-text: #ffffff;
  --hw-accent: #24736a;
  --hw-accent-soft: #d7ebe6;
  --hw-warning: #b8731a;
  --hw-error: #b72f43;
  --hw-success: #2f7d5b;
  --hw-focus: #e2b75d;
  --hw-shadow: 0 12px 30px rgba(55, 40, 26, 0.16);
  --hw-radius-sm: 4px;
  --hw-radius: 8px;
  --hw-radius-lg: 12px;
  --hw-space-1: 4px;
  --hw-space-2: 8px;
  --hw-space-3: 12px;
  --hw-space-4: 16px;
  --hw-space-5: 24px;
}

:root[data-hw-theme="premium-saas"] {
  --hw-bg: #eef4f8;
  --hw-surface: #ffffff;
  --hw-surface-2: #e2edf3;
  --hw-text: #17222b;
  --hw-muted: #5c6974;
  --hw-border: #c8d6df;
  --hw-primary: #2864a6;
  --hw-primary-strong: #174a82;
  --hw-accent: #0f8a76;
  --hw-accent-soft: #d7f0eb;
  --hw-focus: #dc9f35;
  --hw-shadow: 0 12px 28px rgba(26, 54, 82, 0.16);
}

:root[data-hw-theme="dark-pro"] {
  --hw-bg: #15181b;
  --hw-surface: #20262b;
  --hw-surface-2: #2b343a;
  --hw-text: #f1f4f5;
  --hw-muted: #b3bec5;
  --hw-border: #3d4a52;
  --hw-primary: #d06a7d;
  --hw-primary-strong: #ee8aa0;
  --hw-primary-text: #15181b;
  --hw-accent: #53b9aa;
  --hw-accent-soft: #244842;
  --hw-warning: #e2ac46;
  --hw-error: #ff6b7f;
  --hw-success: #65c99c;
  --hw-focus: #f0c96a;
  --hw-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

* {
  font-family: var(--hw-font-family);
  letter-spacing: 0;
}

BODY {
  background: var(--hw-bg);
  color: var(--hw-text);
}

A,
A:hover,
A:active,
A:visited {
  color: inherit;
}

.KopfContainer {
  height: 56px;
  line-height: 56px;
  padding: 0 var(--hw-space-3);
  background: var(--hw-surface);
  border-bottom: 1px solid var(--hw-border);
  box-shadow: var(--hw-shadow);
  color: var(--hw-text);
}

.KopfMenueButton {
  width: 38px !important;
  height: 38px !important;
  margin: 9px var(--hw-space-3) 0 0 !important;
  background: var(--hw-primary) !important;
  color: var(--hw-primary-text) !important;
  border-radius: var(--hw-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.KopfSalon,
.KopfKasse,
.KopfMitarbeiter,
.KopfMitarbeiter > A,
.KopfFranchiseNehmer,
.KopfUhr {
  color: var(--hw-text);
  text-shadow: none;
}

.KopfSalon {
  font-weight: 700;
}

.KopfUhr {
  color: var(--hw-muted);
  font-size: 10pt;
}

.ModernThemeSwitch {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: var(--hw-space-2);
  height: 56px;
  margin-left: var(--hw-space-2);
  color: var(--hw-muted);
}

.ModernThemeSwitch label {
  font-size: 9pt;
  font-weight: 700;
}

.ModernThemeSwitch select {
  min-width: 136px;
  height: 32px;
  padding: 0 28px 0 10px;
  color: var(--hw-text);
  background: var(--hw-surface-2);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
}

.InhaltContainer {
  padding-top: 56px;
  background: var(--hw-bg);
}

.ModulContainer,
.MainContainer,
.ModulInhaltContainer,
.ModulScrollContainer {
  background: var(--hw-bg);
  color: var(--hw-text);
}

.MainContainer {
  background-image: none;
}

.Region,
.RegionBorder,
.ModulContainer .RegionHead,
.MainContainer .RegionHead,
.produktGruppenContainer .RegionHead {
  background: var(--hw-surface);
  color: var(--hw-text);
  border-color: var(--hw-border);
  text-shadow: none;
}

.AnmeldenContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--hw-space-5);
  background:
    linear-gradient(120deg, rgba(154, 63, 82, 0.12), transparent 34%),
    linear-gradient(300deg, rgba(36, 115, 106, 0.14), transparent 40%),
    var(--hw-bg);
}

.AnmeldenContainer .Region {
  width: min(460px, 100%);
  height: auto;
  min-height: 360px;
  padding: var(--hw-space-5);
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow);
}

.AnmeldenContainer .anmelden {
  color: var(--hw-text);
}

.ModulButton {
  margin: var(--hw-space-2);
  padding: var(--hw-space-3);
  border-radius: var(--hw-radius-sm);
  color: var(--hw-text);
}

.ModulButton .Text {
  color: var(--hw-text);
  font-weight: 700;
}

.ModulButton:hover {
  background: var(--hw-accent-soft);
}

.ModulButton.selected,
.ModulButton.selected:hover {
  background: var(--hw-primary);
  color: var(--hw-primary-text);
}

.ModulButton.selected .Text {
  color: var(--hw-primary-text);
}

BUTTON,
INPUT[type=button],
INPUT[type=submit] {
  min-height: 34px;
  padding: 6px 12px;
  color: var(--hw-primary-text);
  background: var(--hw-primary);
  border: 1px solid var(--hw-primary-strong);
  border-radius: var(--hw-radius-sm);
  box-shadow: none;
}

BUTTON:hover,
INPUT[type=button]:hover,
INPUT[type=submit]:hover {
  background: var(--hw-primary-strong);
}

BUTTON:focus,
INPUT:focus,
SELECT:focus,
TEXTAREA:focus,
.ModulButton:focus {
  outline: 2px solid var(--hw-focus);
  outline-offset: 2px;
  text-decoration: none;
}

BUTTON:disabled,
BUTTON[disabled=disabled] {
  color: var(--hw-muted);
  background: var(--hw-surface-2);
  border-color: var(--hw-border);
}

BUTTON.icon {
  min-height: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
}

INPUT[type=password],
INPUT[type=number],
INPUT[type=text],
SELECT,
TEXTAREA {
  min-height: 34px;
  color: var(--hw-text);
  background: var(--hw-surface);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius-sm);
}

INPUT[readonly],
INPUT[type=text][readonly] {
  color: var(--hw-muted);
  background: var(--hw-surface-2);
}

TEXTAREA.error,
INPUT.error,
INPUT[type=text].error,
INPUT[type=number].error,
INPUT[type=password].error,
SELECT.error,
DIV.formularElement.error TEXTAREA,
DIV.formularElement.error INPUT {
  color: var(--hw-text);
  background: rgba(183, 47, 67, 0.12);
  border-color: var(--hw-error);
}

LABEL.error,
DIV.formularElement.error SPAN,
DIV.formularElement.error LABEL,
.kritisch {
  color: var(--hw-error);
}

.positiv {
  color: var(--hw-success);
}

.warnung {
  color: var(--hw-warning);
}

TABLE.standardList,
TABLE.standardTable {
  border-color: var(--hw-border);
  border-radius: var(--hw-radius-sm);
  overflow: hidden;
}

TABLE.standardList TH,
TABLE.standardList TR TH,
TABLE.standardTable TH {
  color: var(--hw-text);
  background: var(--hw-surface-2);
  border-color: var(--hw-border);
}

TABLE.standardList TR > TD {
  color: var(--hw-text);
  background: var(--hw-surface);
  border-color: var(--hw-border);
}

TABLE.standardList TR:hover > TD {
  background: var(--hw-accent-soft);
  color: var(--hw-text);
}

BODY.standardDialog,
BODY.kundeDialog,
BODY.mitarbeiterDialog,
BODY.rechnungDialog,
BODY.bestellungDialog,
BODY.produktDialog,
BODY.kassierenDialog {
  background: var(--hw-bg);
  color: var(--hw-text);
}

DIV.standardDialog,
DIV.kundeDialog,
DIV.mitarbeiterDialog,
DIV.rechnungDialog,
DIV.bestellungDialog,
DIV.produktDialog,
DIV.kassierenDialog {
  background: var(--hw-surface);
  color: var(--hw-text);
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow);
}

DIV.standardDialog .title,
DIV.kundeDialog .title,
DIV.mitarbeiterDialog .title,
DIV.rechnungDialog .title,
DIV.bestellungDialog .title,
DIV.produktDialog .title,
DIV.kassierenDialog .title {
  color: var(--hw-text);
  background: var(--hw-surface-2);
  border-bottom: 1px solid var(--hw-border);
}

#MESSAGE_BOX {
  border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow);
}

#MESSAGE_BOX.success {
  background: var(--hw-success);
}

#MESSAGE_BOX.warning {
  background: var(--hw-warning);
}

#MESSAGE_BOX.error,
#MESSAGE_BOX.failure {
  background: var(--hw-error);
}