/*
 * theme-wia | Wohnen im Alter Farbschema
 */
/* vars.ci */
/*
 * theme-wia | Wohnen im Alter Farbschema
 */
/* mixins.color    */
/*
 * theme-wia | Wohnen im Alter Farbschema
 */
/* mixins.space */
/* utilities.hacks */
/* mixins.color    */
/* special effects */
html,
dialog,
.footer-copyright {
  color-scheme: light dark;
  background-color: var(--background-color);
  color: var(--color);
  -webkit-tap-highlight-color: transparent;
}

:root body {
  color: var(--color-2);
  background-color: inherit;
}

main > article,
.footer-main {
  background-color: var(--surface-10);
}

:any-link {
  color: var(--brand-primary-300);
}
:any-link:is(:focus, :hover) {
  color: var(--brand-primary-400);
}
:any-link::selection {
  background-color: #46270f;
}
:any-link:focus-visible:not([class]) {
  color: var(--brand-primary-400);
  text-decoration-color: transparent;
  outline: 1px solid currentColor;
  outline-offset: 1px;
}
@supports (overflow: overlay) and (not (text-decoration: green wavy underline)) {
  @media (-webkit-min-device-pixel-ratio: 1) {
    :any-link {
      outline: none !important;
    }
  }
}

:any-link:is([aria-controls], [class|=icon]) {
  color: var(--btn-text, var(--brand-text, inherit));
}
:any-link:is([aria-controls], [class|=icon]):hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

u, ins, abbr {
  color: inherit;
}

form {
  --form-element-background-color: var(--surface-10);
  --form-element-border-color: var(--color-7);
  --form-element-color: var(--color);
  --form-element-placeholder-color: var(--color-6);
  --form-element-active-background-color: var(--surface-10, inherit);
  --form-element-active-border-color: #eb6a0a;
  --form-element-focus-color: #2c90a8;
  --form-element-accent-color: #2c90a8;
  --form-element-invalid: #C62828;
  --form-element-invalid-border-color: #E53935;
  --form-element-invalid-active-border-color: #C62828;
  --form-element-invalid-focus-color: #E53935;
  --form-element-valid-border-color: #4CAF50;
  --form-element-valid-active-border-color: #388E3C;
  --form-element-valid-focus-color: #4CAF50;
  --switch-color: #2c90a8;
  --switch-background-color: var(--surface-10);
  --switch-checked-background-color: #62b332;
}

:where(h1, .h1) {
  color: var(--h1-color);
}

:where(h2, .h2) {
  color: var(--h2-color);
}

:where(h3, .h3) {
  color: var(--h3-color);
}

:where(h4, .h4) {
  color: var(--h4-color);
}

:where(h5, .h5) {
  color: var(--h5-color);
}

:where(h6, .h6) {
  color: var(--h6-color);
}

.text-dim[class] {
  color: var(--color-6);
}

.text-compl[class] {
  color: #655e53;
}

.text-primary[class] {
  color: #a33f05;
}

.text-secondary[class] {
  color: #3c601a;
}

.text-accent[class] {
  color: #1c616c;
}

[class*=-title].text-compl {
  --color-title: #655e53;
}

[class*=-title].text-primary {
  --color-title: #a33f05;
}

[class*=-title].text-secondary {
  --color-title: #3c601a;
}

[class*=-title].text-accent {
  --color-title: #1c616c;
}

:is(.note, .warn)[class] {
  color: #C62828;
}

.-primary {
  --brand-base: #bf5106;
  --brand-shade: #832c03;
  --brand-text: #832c03;
  --brand-hx: #832c03;
  --brand-light: #fcf2dd;
  --brand-panel: #f7d79b;
  --brand-line: #f3b66a;
  --brand-hover: #ee8b35;
  --brand-contrast: #260b01;
}

.-secondary {
  --brand-base: #4d8524;
  --brand-shade: #2c4212;
  --brand-text: #2c4212;
  --brand-hx: #2c4212;
  --brand-light: #e4f4e3;
  --brand-panel: #b4e0ac;
  --brand-line: #98d185;
  --brand-hover: #81c35f;
  --brand-contrast: #0e1204;
}

.-accent {
  --brand-base: #237789;
  --brand-shade: #154b50;
  --brand-text: #154b50;
  --brand-hx: #154b50;
  --brand-light: #dae6f0;
  --brand-panel: #aac7dc;
  --brand-line: #85b6cd;
  --brand-hover: #5ea7bc;
  --brand-contrast: #08171a;
}

.-compl {
  --brand-base: #655e53;
  --brand-shade: #23211d;
  --brand-text: #23211d;
  --brand-hx: #23211d;
  --brand-light: #dddad5;
  --brand-panel: #ccc7c0;
  --brand-line: #bfb9b0;
  --brand-hover: #aca59a;
  --brand-contrast: #fff;
}

.-grey {
  --brand-base: #363532;
  --brand-shade: #272524;
  --brand-text: #272524;
  --brand-hx: #272524;
  --brand-light: #f9f9f9;
  --brand-panel: #ebebeb;
  --brand-line: #c7c7c7;
  --brand-hover: #8e8e8e;
  --brand-contrast: #fff;
}

.-kontur:not(.btn) {
  --font-weight: var(--font-weight-strong);
  outline: var(--border-width, 2px) solid var(--brand-line, var(--brand-base));
  outline-offset: -1px;
}

.-ghost {
  --font-weight: var(--font-weight-strong);
  background-color: var(--brand-light);
  color: var(--brand-shade, inherit);
}

.-ghost.btn {
  --brand-light: var(--surface-10);
  color: var(--btn-text);
}
.-ghost.btn:hover {
  color: var(--btn-text-hover);
}

.shadow-dark {
  box-shadow: var(--shadow-dark);
}