/* forms.index */
/* forms.form */
/* mixins.color    */
/* vars.ci */
/* mixins.space */
/* utilities.hacks */
/* mixins.icons */
form {
  --border-color: var(--form-element-border-color);
  --outline-focus: var(--outline-width, calc(var(--border-width) * 2)) solid var(--outline-color, var(--form-element-focus-color, #2c90a8));
  --outline-focus-offset: 2px;
  --outline-shadow: 0 0 0 var(--outline-width) var(--form-element-active-background-color, var(--surface-9)),
  0 0 0 calc(var(--outline-focus-offset) + var(--outline-width)) var(--outline-color);
  --form-element-spacing-block: var(--sizex-3);
  --form-element-spacing-inline: var(--sizex-2);
  --form-element-min-width: 20ch;
  --form-element-max-width: 32ch;
  --form-label-font-weight: var(--font-weight, 600);
  --icon-width: 1ch;
  --icon-size: 3ch;
  --icon-offset: 1ch;
  --icon-pos-start: var(--icon-offset) center;
  --icon-pos-end: center right var(--icon-offset);
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: inherit;
  line-height: var(--line-height, 1.25);
  font-family: inherit;
  letter-spacing: inherit;
}
button::selection,
input::selection,
optgroup::selection,
select::selection,
textarea::selection {
  background-color: #237789;
  color: #fff;
}

optgroup {
  font-style: normal;
  padding: 0.4ex 0 0 0;
  margin: 0;
}

select[multiple] option {
  padding: var(--form-element-spacing-block) var(--form-element-spacing-inline);
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
  margin-top: var(--spacing);
  margin-bottom: var(--spacing);
}

textarea {
  overflow: auto;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

input {
  background-position: var(--icon-pos-end);
  background-size: var(--icon-size) var(--icon-size);
  background-image: var(--input-icon);
}

input[type=email] {
  --icon-pos-start: unset;
  --icon-pos-end: right 1ch center;
}

fieldset {
  position: relative;
  border: 0;
}

legend {
  font-size: var(--font-size-3);
  color: #2c90a8;
}

label {
  display: inline-block;
  position: relative;
}
label > b {
  font-weight: var(--font-weight-strong);
  margin-bottom: calc(var(--spacing) * 0.5);
}
label > b:first-child {
  display: block;
}
label > b:first-child ~ *,
label > b:first-child ~ * + * {
  display: block;
}
label > input:not([type=checkbox], [type=radio]),
label > select {
  width: 100%;
  max-width: var(--form-element-max-width);
}
label > textarea {
  width: 100%;
}

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--form-element-spacing-block) var(--form-element-spacing-inline);
}

input:where(:not([type=range], [type=color])),
select,
textarea {
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  color: currentColor;
  background-color: var(--form-element-background-color);
  font-weight: inherit;
  transform: translateX(calc(var(--border-radius) * -0.2));
}
input:where(:not([type=range], [type=color])) + .btn,
select + .btn,
textarea + .btn {
  transform: translateX(calc(var(--border-radius) * -0.2));
}
@media (prefers-reduced-motion: no-preference) {
  input:where(:not([type=range], [type=color])),
  select,
  textarea {
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  }
}

textarea {
  resize: vertical;
  border-bottom-right-radius: 0;
  padding-left: calc(var(--border-radius) / 2);
  line-height: normal;
  min-height: calc(3em + 2 * var(--form-element-spacing-inline) + var(--gutter, 0px));
}

select {
  min-width: var(--form-element-min-width);
}

input:focus,
select:focus,
textarea:focus {
  background-color: var(--form-element-active-background-color);
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}
@supports (overflow: overlay) and (not (text-decoration: green wavy underline)) {
  @media (-webkit-min-device-pixel-ratio: 1) {
    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      box-shadow: 0 0 0 var(--outline-width) var(--surface-9), 0 0 0 var(--outline-focus-offset) #2c90a8;
    }
  }
}

input[aria-invalid=false],
select[aria-invalid=false],
textarea[aria-invalid=false] {
  --icon-pos-end: center right calc(var(--icon-offset) / 2);
  --icon-aria: var(--icon-valid);
  --input-icon: var(--icon-valid) !important;
  outline-color: var(--form-element-valid-border-color);
}
input:invalid, input[aria-invalid=true],
select:invalid,
select[aria-invalid=true],
textarea:invalid,
textarea[aria-invalid=true] {
  --icon-pos-end: center right calc(var(--icon-offset) / 2);
  --icon-aria: var(--icon-invalid);
  --input-icon: var(--icon-invalid) !important;
  /* background-position: var(--icon-pos-end); */
  outline-color: var(--form-element-invalid-border-color);
}

input:not([type=checkbox], [type=radio], [type=number]):invalid, input:not([type=checkbox], [type=radio], [type=number])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-inline) + var(--icon-size) + var(--icon-offset));
  background-image: var(--icon-aria, var(--input-icon, none));
}

input[type=number] {
  padding-left: 1ch;
  padding-right: var(--border-width);
  border-top-right-radius: var(--border-width);
  border-bottom-right-radius: var(--border-width);
}
input[type=number][aria-invalid] {
  --icon-pos-end: calc(100% - var(--icon-size));
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--form-element-placeholder-color);
  filter: opacity(0.85);
}

input::placeholder,
textarea::placeholder,
select:invalid {
  color: var(--form-element-placeholder-color);
  filter: opacity(0.85);
}

select {
  cursor: pointer;
}
@media (hover) and (pointer: fine) {
  select[multiple], select[size] {
    padding-bottom: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
select:not([multiple]):not([size]) {
  --icon-size: .8em;
  padding-right: calc(1ch + var(--icon-width) + var(--icon-offset));
  padding-left: var(--form-element-spacing-inline);
  background-image: var(--icon-chevron);
  background-position: var(--icon-pos-end);
  background-size: var(--icon-size) var(--icon-size);
}
input + small,
select + small,
textarea + small {
  display: inline;
  width: 100%;
  margin-top: calc(var(--spacing) * -0.75);
  margin-bottom: var(--spacing);
  color: var(--form-element-color);
}

fieldset.personal {
  grid-area: personal;
}

fieldset.contact {
  grid-area: contact;
}

fieldset.message {
  grid-area: message;
}

fieldset.additional {
  grid-area: additional;
}

fieldset.excludes {
  grid-area: excludes;
}

fieldset.profession {
  grid-area: profession;
}

fieldset.legals {
  grid-area: legals;
}

footer {
  grid-area: foot;
}

/* forms.buttons */
.btn,:is([type="button"],[type="submit"],[type="reset"]) {
  --border-radius: .8em;
  --border-width: 2px;
  --button-spacing-block: var(--sizex-3);
  --button-spacing-inline: var(--size-3);
  min-width: max-content;
}
.btn:where(.-primary),:is([type="button"],[type="submit"],[type="reset"]):where(.-primary) {
  --btn-shade: #46270f;
  --btn-base: #eb6a0a;
  --btn-border: #eb6a0a;
  --btn-hover: #ff8f3b;
  --btn-text: var(--color-10);
  --btn-text-hover: var(--color-10);
}
.btn:where(.-secondary),:is([type="button"],[type="submit"],[type="reset"]):where(.-secondary) {
  --btn-shade: #243818;
  --btn-base: #62b332;
  --btn-hover: #c7eab2;
  --btn-text: var(--color-10);
  --btn-text-hover: var(--btn-shade);
}
.btn:where(.-accent),:is([type="button"],[type="submit"],[type="reset"]):where(.-accent) {
  --btn-shade: #162e34;
  --btn-base: #2c90a8;
  --btn-hover: #acdee9;
  --btn-text: var(--color-10);
  --btn-text-hover: var(--btn-shade);
}
.btn:where(.-compl),:is([type="button"],[type="submit"],[type="reset"]):where(.-compl) {
  --btn-shade: #23211d;
  --btn-base: #655e53;
  --btn-hover: var(--brand-compl-600);
  --btn-text: var(--color-10);
  --btn-text-hover: var(--btn-shade);
}

.btn:disabled, .btn[aria-disabled=true], :any-link:disabled, :any-link[aria-disabled=true], button:disabled, button[aria-disabled=true], input:disabled, input[aria-disabled=true], select:disabled, select[aria-disabled=true], textarea:disabled, textarea[aria-disabled=true] {
  pointer-events: none;
  touch-action: none;
}

.btn,
a:any-link.btn,
:is(form button,:is([type="button"],[type="submit"],[type="reset"])) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--gutter, var(--gap, 1rem));
  height: auto;
  padding: var(--button-spacing-block, var(--sizex-3)) var(--button-spacing-inline, var(--size-3));
  font-size: 1em;
  font-weight: var(--font-weight-strong);
  line-height: normal;
  -webkit-user-select: none;
  user-select: none;
  color: var(--btn-text);
  background-color: var(--btn-base);
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--btn-border, var(--btn-base));
  border-radius: var(--border-radius);
}
@media (max-width: 49.999em) {
  .btn,
  a:any-link.btn,
  :is(form button,:is([type="button"],[type="submit"],[type="reset"])) {
    --button-spacing-block: calc(1.4 * var(--form-element-spacing-block, var(--sizex-3)));
    --button-spacing-inline: calc(1.4 * var(--form-element-spacing-inline, var(--size-3)));
  }
}
.btn:focus,
a:any-link.btn:focus,
:is(form button,:is([type="button"],[type="submit"],[type="reset"])):focus {
  outline: 1px solid #2c90a8;
  outline-offset: 2px;
  box-shadow: inset 0 0 0.8em 0 var(--btn-border);
  color: var(--btn-text-hover, inherit);
  background-color: var(--btn-hover, inherit);
}
.btn:focus:not(:focus-visible),
a:any-link.btn:focus:not(:focus-visible),
:is(form button,:is([type="button"],[type="submit"],[type="reset"])):focus:not(:focus-visible) {
  outline: none;
}
.btn:hover,
a:any-link.btn:hover,
:is(form button,:is([type="button"],[type="submit"],[type="reset"])):hover {
  color: var(--btn-text-hover, inherit);
  background-color: var(--btn-hover, inherit);
}

a:any-link.btn[class] {
  --gutter: .5ex;
  text-decoration-line: none;
}
a:any-link.btn[class]::before {
  content: "➝";
  order: 0;
  margin-left: -0.625ch;
}

.btn {
  --_radii: 0 var(--border-radius) var(--border-radius) 0;
}
.btn[data-dir=rtl] {
  --_radii: var(--border-radius) 0 0 var(--border-radius);
}
.btn.-half {
  --border-width: 1px;
  border-radius: var(--_radii);
  white-space: pre;
  min-width: unset;
}
.btn.-big {
  padding: 2ex 3em;
}
.btn:not(.-primary) {
  --btn-border: var(--btn-base);
}
.btn.-ghost {
  --btn-base: var(--surface-10);
  --btn-border: var(--btn-text);
}
.btn.-ghost:where(.-primary) {
  --btn-text: #eb6a0a;
}
.btn.-ghost:where(.-secondary) {
  --btn-text: #62b332;
}
.btn.-ghost:where(.-accent) {
  --btn-text: #2c90a8;
}
.btn.-ghost:where(.-compl) {
  --btn-text: #655e53;
}

.close,
[type=button].close,
.vts-alert__dismiss,
.maplibregl-popup-close-button {
  --icon-size: 2em;
  --border-color: var(--surface-8);
  --border-radius: 100%;
  position: absolute;
  z-index: 2;
  top: var(--close-btn-y, var(--btn-offset, 0.5ex));
  right: var(--close-btn-x, var(--btn-offset, 0.5ex));
  width: var(--icon-size);
  height: var(--icon-size);
  aspect-ratio: 1;
  min-width: unset;
  padding: max(1ex, 0.75rem);
  background-image: var(--icon-close);
  background-position: center;
  background-size: auto calc(var(--icon-size) / 2);
  background-color: var(--surface-10);
  color: transparent;
  border-width: var(--border-width);
  border-style: solid;
  border-color: var(--border-color);
}
.close:hover, .close:focus,
[type=button].close:hover,
[type=button].close:focus,
.vts-alert__dismiss:hover,
.vts-alert__dismiss:focus,
.maplibregl-popup-close-button:hover,
.maplibregl-popup-close-button:focus {
  background-color: var(--border-color);
}
.close.-sticky,
[type=button].close.-sticky,
.vts-alert__dismiss.-sticky,
.maplibregl-popup-close-button.-sticky {
  position: sticky;
  top: 0;
  translate: var(--spacing) var(--spacing-neg);
  transform-origin: top right;
}

.btn:is([type="button"],[type="submit"],[type="reset"])::selection {
  color: inherit;
  font-weight: inherit;
  background-color: inherit;
}

/* Cards Hover Tweak */
.m_card:not(.-plain):hover .btn {
  --btn-shade: #46270f;
  --btn-base: #eb6a0a;
  --btn-border: #eb6a0a;
  --btn-hover: #ff8f3b;
  --btn-text: var(--color-10);
  --btn-text-hover: var(--color-10);
}

/* für nicht .btn */
button:hover {
  background-color: inherit;
}

.link-like {
  --form-element-min-width: max-content;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  padding: 0;
  font-size: inherit;
  white-space: nowrap;
  color: #eb6a0a;
  background-color: transparent;
  border: 0;
  border-radius: unset;
  cursor: pointer;
}
.link-like:focus-visible {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  color: #eb6a0a;
  outline: 1px solid #2c90a8;
}
.link-like:active, .link-like:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  background-color: unset;
  color: #eb6a0a;
}
.link-like:disabled, .link-like[aria-disabled=true] {
  pointer-events: none;
  touch-action: none;
}

/* forms.checkbox-radio */
/* mixins.fallbacks */
/* mixins.numbers */
[type=checkbox],
[type=radio] {
  --outline-focus-offset: 1px;
  width: var(--sizem-4);
  height: var(--sizem-4);
  margin-top: -0.125em;
  margin-right: var(--size-2);
  margin-left: 0;
  padding: initial;
  font-size: inherit;
  vertical-align: middle;
  cursor: pointer;
  background-position: center;
  background-size: 0.75em auto;
  transform: translateX(0);
}
[type=checkbox]:checked,
[type=radio]:checked {
  background-image: var(--icon-checkbox);
}
[type=checkbox]:focus,
[type=radio]:focus {
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}
[type=checkbox]:focus:checked,
[type=radio]:focus:checked {
  outline-offset: 1px;
}
[type=checkbox] ~ label,
[type=radio] ~ label {
  display: inline-block;
  margin-right: 0.375em;
  margin-bottom: 0;
  cursor: pointer;
}

[type=checkbox] {
  border-radius: 0.25ex;
  border: var(--border-width) solid var(--color-7);
}
[type=checkbox]:indeterminate {
  background-color: var(--surface-7);
  background-image: var(--icon-minus);
}

input[type=checkbox]:checked {
  background-color: #2c90a8;
}

[type=radio] {
  border-radius: 50%;
}
[type=radio]:focus:not(:focus-visible) {
  --type: radio;
  outline: none;
}
[type=radio]:checked {
  background-image: var(--icon-checkbox);
  background-color: #2c90a8;
}

.form-checkbox {
  -webkit-hyphens: auto;
  hyphens: auto;
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "box txt";
  align-items: start;
}
.form-checkbox input {
  grid-area: box;
}
.form-checkbox span {
  grid-area: txt;
}
.form-checkbox .note {
  grid-column-start: 2;
  padding-bottom: 1ex;
}

.tipp-checkbox {
  font-size: smaller;
}
.tipp-checkbox > b {
  font-weight: var(--font-weight-strong);
  color: #fff;
  background-color: #62b332;
  border-radius: 1em;
}

/* forms.alt-input */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=file],
[type=range] {
  padding: 0;
  border-width: 0;
}

[type=color] {
  width: 2em;
  max-width: 2em !important;
  height: 2em;
  max-height: 2em !important;
  padding: 0.35ex !important;
  border-radius: 1ex !important;
}
[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
[type=color]::-moz-focus-inner {
  padding: 0;
}
[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--border-radius) * 0.5);
}
[type=color]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--border-radius) * 0.5);
}

form[id] input[type][type=date], form[id] input[type][type=datetime-local], form[id] input[type][type=month], form[id] input[type][type=time], form[id] input[type][type=week],
form[class] input[type][type=date],
form[class] input[type][type=datetime-local],
form[class] input[type][type=month],
form[class] input[type][type=time],
form[class] input[type][type=week] {
  --input-icon: var(--icon-calendar);
  padding-right: calc(1ch + var(--icon-width) + var(--icon-offset));
  background-position: var(--icon-pos-end);
}
form[id] input[type][type=time],
form[class] input[type][type=time] {
  --input-icon: var(--icon-time);
}

@supports (-moz-appearance: inherit) {
  :is(form[id], form[class]) input[type][type=date], :is(form[id], form[class]) input[type][type=datetime-local] {
    --input-icon: none;
    padding-right: 0.4ch;
  }
  :is(form[id], form[class]) input[type][type=date][aria-invalid], :is(form[id], form[class]) input[type][type=datetime-local][aria-invalid] {
    --icon-pos-end: center right calc(.4ch + var(--icon-size));
  }
}
[type=date]::-webkit-calendar-picker-indicator,
[type=datetime-local]::-webkit-calendar-picker-indicator,
[type=month]::-webkit-calendar-picker-indicator,
[type=time]::-webkit-calendar-picker-indicator,
[type=week]::-webkit-calendar-picker-indicator {
  width: var(--icon-width);
  margin-right: calc(-1 * var(--icon-width));
  margin-left: var(--icon-offset);
  filter: opacity(0);
}

[type=file] {
  --_padding-block: calc(var(--form-element-spacing-block) - var(--border-width));
  --border-color: #eb6a0a;
  border: none;
  border-radius: 0;
  background-color: none;
  cursor: pointer;
  padding: 4px 0 4px 4px;
}
[type=file]:focus, [type=file]:hover {
  border: none;
  outline: none;
  box-shadow: none;
}
[type=file]::-webkit-file-upload-button {
  margin-left: 0;
  margin-right: calc(var(--form-element-spacing-inline) / 2);
  padding: var(--_padding-block) var(--form-element-spacing-inline);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  color: #eb6a0a;
  font-size: 0.96em;
  text-align: center;
  transform: translateX(calc(var(--border-radius) * -0.2));
}
[type=file]::-webkit-file-upload-button + .btn {
  transform: translateX(calc(var(--border-radius) * -0.2));
}
[type=file]::-webkit-file-upload-button:active, [type=file]::-webkit-file-upload-button:focus {
  outline: #62b332;
  outline-offset: 1px;
}
[type=file]::-webkit-file-upload-button:active:not(:focus-visible), [type=file]::-webkit-file-upload-button:focus:not(:focus-visible) {
  outline: none;
}
[type=file]::-webkit-file-upload-button:hover {
  color: var(--color-9);
  border-color: var(--border-color);
  background-color: #ff8f3b;
}
[type=file]::file-selector-button {
  margin-left: 0;
  margin-right: calc(var(--form-element-spacing-inline) / 2);
  padding: var(--_padding-block) var(--form-element-spacing-inline);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  color: #eb6a0a;
  font-size: 0.96em;
  text-align: center;
  transform: translateX(calc(var(--border-radius) * -0.2));
}
[type=file]::file-selector-button + .btn {
  transform: translateX(calc(var(--border-radius) * -0.2));
}
[type=file]::file-selector-button:active, [type=file]::file-selector-button:focus {
  outline: #62b332;
  outline-offset: 1px;
}
[type=file]::file-selector-button:active:not(:focus-visible), [type=file]::file-selector-button:focus:not(:focus-visible) {
  outline: none;
}
[type=file]::file-selector-button:hover {
  color: var(--color-9);
  border-color: var(--border-color);
  background-color: #ff8f3b;
}

[type=range] {
  max-width: var(--range-max-width, var(--form-element-max-width));
  height: 1.25em;
  background-color: transparent;
  accent-color: var(--range-thumb-hover-color);
}
[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1em;
  border-radius: var(--border-radius);
  background-color: #acdee9;
}
@media (prefers-reduced-motion: no-preference) {
  [type=range]::-webkit-slider-runnable-track {
    transition: background-color var(--transition);
  }
}
[type=range]::-moz-range-track {
  width: 100%;
  height: 1em;
  border-radius: var(--border-radius);
  background-color: #acdee9;
}
@media (prefers-reduced-motion: no-preference) {
  [type=range]::-moz-range-track {
    transition: background-color var(--transition);
  }
}
[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.125em;
  border: 2px solid #2c90a8;
  border-radius: 50%;
  background-color: #2c90a8;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  [type=range]::-webkit-slider-thumb {
    transition: background-color var(--transition), transform var(--transition);
  }
}
[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.125em;
  border: 2px solid #2c90a8;
  border-radius: 50%;
  background-color: #2c90a8;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  [type=range]::-moz-range-thumb {
    transition: background-color var(--transition), transform var(--transition);
  }
}
[type=range]:hover, [type=range]:focus {
  --range-border-color: var(--range-active-border-color);
}
[type=range]:focus-visible {
  outline-color: currentColor;
  border-radius: var(--border-radius);
}
[type=range]:active {
  accent-color: var(--range-thumb-active-color);
}
[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.25);
}
[type=range]:active::-moz-range-thumb {
  transform: scale(1.25);
}

input:placeholder-shown {
  padding-left: calc(var(--form-element-spacing-inline) + 1ch);
}

input[type=search] {
  border-radius: var(--border-radius);
  background-position: var(--icon-pos-start);
  padding-left: calc(var(--form-element-spacing-inline) + 1ch);
}

[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

[type=email]:placeholder-shown {
  --input-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="svg-text-mail" width="24" height="24" viewBox="0 0 60 66" fill="none" stroke="%235a5752" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.979 20.064 3.5 25.5m46.479-8.436-18-14-18 14M60.5 25.5l-6.521-5.436"/> <path class="icon-bg paper" stroke="none" fill="none" d="M54 29.5V17H10v12.5l19 10.707 2.977-2.614L35 40.207 54 29.5Z"/> <path d="M10.5 29.5v-13h43v13"/> <path d="M29.03 39.936 3.479 25.5v36h57v-36L34.927 39.936"/> <path d="m60.479 61.5-28.5-24-28.5 24"/></svg>');
  --icon-width: 3ch;
}
[type=email].icon-subscribe {
  background-size: calc(var(--icon-size) + 1em) var(--icon-size);
}

/* forms.switches */
[type=checkbox][role=switch] {
  --switch-height: var(--sizem-6);
  --switch-ratio: 2;
  --_pad: calc(var(--switch-height) / 9.4);
  --_height: calc(var(--switch-height) + var(--_pad));
  --_dot: calc(var(--_height) - 2 * var(--_pad) - var(--border-width, 0));
  --_tf: 100ms ease-in-out;
  width: calc(var(--switch-ratio) * var(--_height) + var(--_pad));
  height: var(--_height);
  margin-left: var(--size-2);
  margin-right: var(--size-2);
  flex-shrink: 0;
  padding: var(--_pad);
  line-height: var(--_height);
  border-radius: var(--_height);
  border-color: var(--switch-color);
  color: var(--switch-color);
  filter: saturate(0.2) grayscale(0.4);
}
[type=checkbox][role=switch]:focus:not(:focus-visible) {
  outline: none;
}
[type=checkbox][role=switch]::before {
  content: "";
  display: block;
  width: calc(var(--_dot));
  height: 100%;
  border-radius: 50%;
  border: 1px solid currentColor;
  background-color: currentColor;
  transition: margin-left var(--_tf), background-color var(--_tf), border-color;
}
[type=checkbox][role=switch]:indeterminate {
  background-color: var(--surface-9);
}
[type=checkbox][role=switch]:indeterminate::before {
  border: 1px solid var(--switch-color);
  background-color: var(--surface-8);
  margin-left: calc(50% - var(--_dot) / 2);
}
[type=checkbox][role=switch]:checked {
  background-color: var(--surface-9);
  filter: unset;
  border-color: var(--switch-checked-color);
}
[type=checkbox][role=switch]:checked::before {
  margin-left: calc(100% - var(--_dot));
  color: var(--switch-checked-color);
}
[type=checkbox][role=switch]:disabled::before {
  filter: inherit;
}

/* forms.compounds */
.side-button {
  display: inline-flex;
  flex-direction: row;
  padding: 0;
  border-radius: var(--border-radius);
}
.side-button > input,
.side-button > button {
  transform: none;
}
.side-button > input {
  flex-basis: 100%;
  order: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-left-width: var(--border-width);
  border-right-width: 0;
}
.side-button .-half {
  order: 1;
  --border-radius: 1em;
  transform: translateX(0);
  outline: none;
}
.side-button[data-dir=rtl] input {
  order: 1;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  border-left-width: 0;
  border-right-width: var(--border-width);
}
.side-button[data-dir=rtl] .-half {
  order: 0;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.side-button .loader[data-loading] {
  position: absolute;
}
.side-button button:has([data-loading]) span {
  visibility: hidden;
}

.side-button:focus-within {
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}
.side-button:focus-within > input[type]:focus {
  outline: none;
  box-shadow: none;
}
.side-button:focus-within > button:focus {
  outline: var(--outline-focus);
  outline-offset: 0;
}

.copy-select {
  -webkit-user-select: all;
  user-select: all;
}

.copy-select:focus {
  animation: copy-select 100ms step-end forwards;
}

@keyframes copy-select {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}
.c_searchbox {
  --form-element-spacing-inline: var(--sizex-3);
  --icon-size: 1.5em;
  --icon-width: 1em;
  --icon-pos-start: left;
  --icon-pos-end: left;
}

/* Success Message */

.successmessage {
  padding: calc(var(--spacing) * 2);
  max-width: 72ch;
  box-shadow: var(--shadow-dark);
  background-color: var(--brand-accent-900);
  margin-inline: auto;
  margin-top: var(--spacing);
  margin-bottom: calc(var(--spacing) * 2);
  outline: unset;
}
/*index*/