@charset "UTF-8";
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on March 22, 2023 */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap");
/******** reset ********/
html {
  scroll-behavior: smooth;
}
html.no-print {
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
html.no-print.landingpage-template h1.headline {
  -webkit-font-smoothing: auto;
}

*:where(:not(iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  cursor: revert;
}

textarea {
  white-space: revert;
}

:where([hidden], .hidden) {
  display: none;
}

ol:not([class]) {
  list-style: outside decimal;
}

ol:where(:not([class])) > li,
ul:where(:not([class])) > li {
  --textListOffsetFactor: 2;
  position: relative;
  left: calc(var(--gap) * var(--textListOffsetFactor));
  padding-inline-end: calc(var(--gap) * var(--textListOffsetFactor));
  padding-block-start: calc(var(--baseLineHeight) / 3);
}

ol:where(.grid, .flex, [class*=pseudo-]),
ul:where(.grid, .flex, [class*=pseudo-]),
menu {
  list-style: none;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100% !important;
}
table td {
  border-bottom: var(--borderWidth) var(--borderStyle) var(--colorMain);
  padding-block: calc(var(--baseLineHeight) / 2);
}
table td:where(:not(:last-child)) {
  padding-inline-end: var(--gap);
}
table > :first-child td {
  border-top: var(--borderWidth) var(--borderStyle) var(--colorMain);
}

sup, sub {
  position: relative;
  display: inline-block;
  font-size: 80%;
}

sup {
  top: -0.3em;
}

sub {
  top: 0.3em;
}

/* accessibility */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  margin: -1px;
}

:where(a, button):not(.show-description, .form-toggle-button):focus-visible {
  outline: 2px solid var(--colorAccent);
  outline-offset: 2px;
}

:where(a, button).show-description:focus-visible {
  opacity: 1;
}

:where(a, button).form-toggle-button:focus-visible span:first-child {
  border-color: var(--black) !important;
}

.form-item :where(input, textarea, select):focus-visible, .form-item :where(input, textarea, select)[data-observe=complete] {
  border-color: var(--black);
  color: var(--black);
}

:where(:not(svg, .all-values).visually-hidden):focus-visible, :where(:not(svg, .all-values).visually-hidden):focus-within {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  position: relative;
  z-index: 100;
  white-space: normal;
  background-color: var(--colorBackground) !important;
  color: var(--black) !important;
  padding: var(--gap);
  font-size: 16px !important;
}

/******** variables ********/
/* assign CSS variables */
:root {
  --baseFontsize: calc(1em / 10 * 10);
  --baseLineHeight: 1.5em;
  --columns: 6;
  --gap: 1em;
  --maxTextLengthLarge: 80ch;
  --maxTextLengthSmall: 50ch;
  --blueNew: #35437e;
  --blueNewHover: #384FAB;
  --colorMain: var(--blueNew);
  --colorBackground: #fff;
  --colorAccent: var(--blueNew, #384FAB);
  --colorShade: var(--blueNew, #35437E);
  --colorBorderLight: #CBC9C7;
  --colorGray: #B4ADA0;
  --yellow: #FFE713;
  --black: #000;
  --grey: #E4E2DE;
  --colorButton: var(--colorMain);
  --colorButtonBackground: var(--colorBackground);
  --colorButtonAccent: var(--colorAccent);
  --colorButtonShade: var(--colorShade);
  --buttonSpaceUnit: var(--gap);
  --buttonSpaceInline: calc(var(--buttonSpaceUnit) * 1.5);
  --buttonSpaceBlock: calc(var(--buttonSpaceUnit) / 4);
  --buttonSpaceInside: calc(var(--buttonSpaceUnit) / 2);
  --buttonBorderRadius: 99vw;
  --buttonBorderWidth: var(--borderWidth);
  --buttonIconSpaceInline: var(--buttonSpaceUnit);
  --fontRegular: "BV-Regular", sans-serif;
  --fontBold: "BV-Bold", sans-serif;
  --fontSemibold: "BV-Semibold", sans-serif;
  --fontWeightegular: 400;
  --fontWieghtBold: 600;
  --fontWeightSemibold: 700;
  --iconSizeSmall: 1em;
  --iconSizeLarge: 1.4em;
  --borderWidth: 1px;
  --borderStyle: solid;
  --borderRadius: calc(1.25 * var(--gap));
  --transitionDuration: 250ms;
  --transitionEasing: ease-in-out;
  --transitionDelay: 250ms;
  --maxButtonSizeRoot: 100vw;
  --maxButtonRootSpace: calc(5 * var(--gap));
  --maxButtonInlineSpace: calc(
          (1.5 + 1 + 1.2 + 0.2) * var(--buttonSpaceUnit));
  --maxButtonIconSize: var(--iconSizeSmall);
  --maxButtonTextWidth: calc(var(--maxButtonSizeRoot) - var(--maxButtonRootSpace) - var(--maxButtonInlineSpace) - var(--maxButtonIconSize));
  --iconArrow: url(#svg-icon-arrow-backward);
  --iconArrowForward: url(#svg-icon-arrow-forward);
  --iconArrowBackward: url(#svg-icon-arrow-backward);
  --iconHamburger: url(#svg-icon-hamburger);
  --iconListStart: url(#svg-icon-list-start);
  --iconListEnd: url(#svg-icon-list-end);
  --iconCloseSmall: url(#svg-icon-close-small);
  --iconCloseLarge: url(#svg-icon-close-large);
  --clippathOpen: polygon(
    43.75% 8%,
    56.25% 8%,
    56.25% 43.75%,
    92% 43.75%,
    92% 56.25%,
    56.25% 56.25%,
    56.25% 92%,
    43.75% 92%,
    43.75% 56.25%,
    8% 56.25%,
    8% 43.75%,
    43.75% 43.75%);
  --clippathClose: polygon(
    16.4% 7.57%,
    50% 41.16%,
    83.59% 7.57%,
    92.43% 16.41%,
    58.84% 50%,
    92.43% 83.59%,
    83.59% 92.43%,
    50% 58.84%,
    16.4% 92.43%,
    7.56% 83.58%,
    41.15% 50%,
    7.56% 16.41%);
  --clippathArrowForward: polygon(
    0% 43.75%,
    76.49% 43.75%,
    49.16% 16.41%,
    58% 7.57%,
    100% 50%,
    58% 92.42%,
    49.16% 83.58%,
    76.49% 56.25%,
    0% 56.25%);
  --clippathArrowBackward: polygon(
    0% 50%,
    42.42% 7.57%,
    51.26% 16.41%,
    23.92% 43.74%,
    100% 43.74%,
    100% 56.24%,
    23.92% 56.24%,
    51.26% 83.58%,
    42.42% 92.42%);
  --clippathArrowUp: polygon(
    50% 0%,
    92.42% 42.21%,
    83.58% 51.05%,
    56.25% 23.71%,
    56.25% 100%,
    43.75% 100%,
    43.75% 23.71%,
    16.41% 51.05%,
    7.57% 42.21%);
  --clippathArrowDown: polygon(
    43.75% 0%,
    56.25% 0%,
    56.25% 76.07%,
    83.58% 48.73%,
    92.42% 57.57%,
    50% 100%,
    7.57% 57.57%,
    16.41% 48.73%,
    43.75% 76.07%);
  --clippathArrowForwardUp: polygon(
    27.71% 12.28%,
    87.71% 12.28%,
    87.71% 72.28%,
    75.21% 72.28%,
    75.21% 33.62%,
    21.12% 87.71%,
    12.28% 78.87%,
    66.37% 24.78%,
    27.71% 24.78%);
  --clippathArrowForwardDown: polygon(
    21.12% 12.28%,
    75.21% 66.37%,
    75.21% 27.71%,
    87.71% 27.71%,
    87.71% 87.71%,
    27.71% 87.71%,
    27.71% 75.21%,
    66.37% 75.21%,
    12.28% 21.12%);
  --clippathArrowBackwardUp: polygon(
    12.28% 12.28%,
    72.28% 12.28%,
    72.28% 24.78%,
    33.62% 24.78%,
    87.71% 78.87%,
    78.87% 87.71%,
    24.78% 33.62%,
    24.78% 72.28%,
    12.28% 72.28%);
  --clippathArrowBackwardDown: polygon(
    12.28% 27.71%,
    24.78% 27.71%,
    24.78% 66.37%,
    78.87% 12.28%,
    87.71% 21.12%,
    33.62% 75.21%,
    72.28% 75.21%,
    72.28% 87.71%,
    12.28% 87.71%);
  --clippathDownloadLine: polygon(
    16.41% 36.91%,
    43.75% 64.25%,
    43.75% 7.75%,
    56.25% 7.75%,
    56.25% 64.25%,
    83.58% 36.91%,
    92.42% 45.75%,
    50.68% 87.5%,
    90% 87.5%,
    90% 100%,
    10% 100%,
    10% 87.5%,
    49.31% 87.5%,
    7.57% 45.75%);
  --clippathDownloadBox: polygon(
    16.41% 36.91%,
    43.75% 64.25%,
    43.75% 7.75%,
    56.25% 7.75%,
    56.25% 64.25%,
    83.58% 36.91%,
    92.42% 45.75%,
    50.68% 87.5%,
    78.28% 87.5%,
    78.28% 67.5%,
    90% 67.5%,
    90% 87.5%,
    90% 100%,
    10% 100%,
    10% 87.5%,
    10% 67.5%,
    22.5% 67.5%,
    22.5% 87.5%,
    49.31% 87.5%,
    7.57% 45.75%);
}

/******** framework ********/
html {
  scroll-padding-top: calc(4 * var(--gap));
}

.flex {
  display: flex;
}
.flex > * {
  flex-basis: auto;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.flex-vertical {
  flex-direction: column;
}
.flex.flex-revert {
  flex-flow: row-reverse;
}
.flex.flex-revert.flex-vertical {
  flex-flow: column-reverse;
}
.flex.align-inline-start {
  justify-content: flex-start;
}
.flex.align-inline-start.flex-vertical {
  align-items: flex-start;
}
.flex.align-inline-start.flex-revert {
  justify-content: flex-end;
}
.flex.align-inline-end {
  justify-content: flex-end;
}
.flex.align-inline-end.flex-vertical {
  align-items: flex-end;
}
.flex.align-inline-end.flex-revert {
  justify-content: flex-start;
}
.flex.align-inline-center {
  justify-content: center;
}
.flex.align-inline-center.flex-vertical {
  align-items: center;
}
.flex.align-block-start {
  justify-items: flex-start;
}
.flex.align-block-start.flex-vertical {
  justify-content: flex-start;
}
.flex.align-block-start.flex-revert {
  align-items: flex-end;
}
.flex.align-block-end {
  align-items: flex-end;
}
.flex.align-block-end.flex-vertical {
  justify-content: flex-end;
}
.flex.align-block-end.flex-revert {
  align-items: flex-start;
}
.flex.align-block-center {
  align-items: center;
}
.flex.align-block-center.flex-vertical {
  justify-content: center;
}

.grid {
  display: grid;
}
.grid.grid-horizontal {
  grid-auto-flow: column;
  grid-auto-columns: auto;
}
.grid.grid-columns {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.grid.align-inline-start {
  justify-content: start;
}
.grid.align-inline-end {
  justify-content: end;
}
.grid.align-inline-center {
  justify-content: center;
}
.grid.align-block-start {
  align-content: start;
}
.grid.align-block-end {
  align-content: end;
}
.grid.align-block-center {
  align-content: center;
}

:is(.gap) {
  gap: var(--gap);
}

a:hover,
button:hover {
  cursor: pointer;
}

.language-wrapper {
  position: relative;
}
.language-wrapper[data-toggle-state=closed] .button:where(:is(:not([data-state=selected]))) {
  display: none;
}
.language-wrapper[data-toggle-state=closed] button {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.firefox .language-wrapper[data-toggle-state=closed] button {
  width: 5em;
}

html {
  background-color: var(--yellow);
  background: linear-gradient(to right, var(--yellow), var(--yellow) 30%, var(--colorBackground) 30.05%);
}
@media screen and (max-width: 1024px) {
  html {
    background-image: none;
    background-color: var(--colorBackground);
  }
}

.page-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  align-content: space-between;
}

main {
  grid-column: 1/-1;
  grid-row: 1/span 3;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 1fr;
  position: relative;
}
@media screen and (max-width: 1024px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}

address > a > img {
  max-width: 11.8125em;
}

html:where(:is(:not(.home-template))) address {
  margin-block-start: auto;
  margin-inline: 33.3333333333% calc(3 * var(--gap));
  padding-block: calc(3 * var(--gap));
  max-width: 13em;
}

@media screen and (max-width: 1024px) {
  html:where(.registration-template, .calculation-template, .success-template, .closed-template, .content-template) main > :first-child > address {
    position: absolute;
    bottom: 0;
  }
}
html:where(.registration-template, .calculation-template, .success-template, .closed-template) main > :first-child > address {
  margin-inline-start: 33.3333333333%;
}

@media screen and (min-width: 1025px) and (max-width: 1900px) and (min-height: 800px) {
  html:where(.registration-template, .calculation-template, .success-template, .content-template, .closed-template) main > :first-child > address {
    position: sticky;
    bottom: 0;
  }
}
@media screen and (min-width: 1025px) and (min-width: 1901px) {
  html:where(.registration-template, .calculation-template, .success-template, .content-template, .closed-template) main > :first-child > address {
    position: relative;
    bottom: auto;
  }
}
@media screen and (min-width: 1025px) and (min-width: 1901px) and (min-height: 850px) {
  html:where(.registration-template, .calculation-template, .success-template, .content-template, .closed-template) main > :first-child > address {
    position: sticky;
    bottom: 0;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  html:where(.registration-template, .calculation-template, .success-template, .content-template, .closed-template) main > :first-child > address {
    margin-inline-start: 16.6666666667%;
  }
}
@media screen and (min-width: 1025px) {
  html:where(.content-template, .receipt-template) main > :first-child > address {
    position: sticky;
    bottom: 0;
  }
}
@media screen and (max-width: 1024px) {
  html.content-template main {
    margin-top: 8em;
  }
  html.content-template main > :first-child {
    width: 100%;
  }
  html.content-template main address {
    display: none !important;
  }
}
.header-wrapper {
  grid-column: 1/-1;
  grid-row: 1;
  align-items: flex-start;
  align-content: flex-start;
  padding: calc(3 * var(--gap)) 10% calc(3 * var(--gap)) 10%;
  gap: var(--gap);
  z-index: 2;
  pointer-events: none;
}
.header-wrapper > * {
  pointer-events: auto;
}
@media screen and (max-width: 1440px) {
  .header-wrapper {
    padding-inline: 5%;
  }
}
@media screen and (max-width: 1024px) {
  .header-wrapper {
    background-color: var(--yellow);
    padding-block: calc(2 * var(--gap)) var(--gap);
  }
}
.header-wrapper .logo-wrapper {
  order: 1;
  line-height: 1;
  white-space: nowrap;
  margin-inline-end: auto;
  display: grid;
  gap: calc(1 * var(--gap));
}
.open-menu .header-wrapper .logo-wrapper {
  width: 1em;
}
.header-wrapper .logo-wrapper p {
  font-size: 95%;
  font-weight: 600;
}
.header-wrapper .logo-wrapper p a {
  text-decoration: underline;
}
@media screen and (max-width: 400px) {
  html.receipt-template .header-wrapper .logo-wrapper {
    display: none;
  }
}
.header-wrapper .language-wrapper {
  --colorShade: var(--blueNew, #35437E);
  order: 2;
  flex-direction: row-reverse;
}
.header-wrapper .language-wrapper > *:where(:is(:not(button))) {
  margin-inline-start: calc(var(--gap) / 3 * 2);
}
.header-wrapper .language-wrapper [aria-expanded=false]:hover + a, .header-wrapper .language-wrapper [aria-expanded=true] + a + a + a + a, .header-wrapper .language-wrapper [aria-expanded=true] + a + a + a, .header-wrapper .language-wrapper [aria-expanded=true] + a + a, .header-wrapper .language-wrapper [aria-expanded=true] + a {
  --colorShade: #35437E;
}
.header-wrapper nav {
  order: 2;
  gap: var(--gap);
  z-index: 1;
}
.header-wrapper nav > button {
  --colorShade: var(--yellow);
}
.header-wrapper nav > button:hover::after {
  background-color: var(--black);
}
.header-wrapper nav > button[aria-expanded=true] {
  background-color: var(--black);
  border-color: var(--black);
}
.header-wrapper nav > button[aria-expanded=true]::after {
  background-color: var(--colorBackground);
}
.header-wrapper nav > button.button:not(.menu-button)[aria-expanded=true], .header-wrapper nav > button.button:not(.menu-button):hover, .header-wrapper nav > button.login[aria-expanded=true], .header-wrapper nav > button.login:hover {
  color: var(--black);
  background-color: var(--colorShade);
  border-color: var(--colorShade);
}
@media screen and (max-width: 1024px) {
  .header-wrapper nav > button.button:not(.menu-button)[aria-expanded=true], .header-wrapper nav > button.button:not(.menu-button):hover, .header-wrapper nav > button.login[aria-expanded=true], .header-wrapper nav > button.login:hover {
    border-color: var(--black);
  }
}
.header-wrapper nav > button [aria-expanded=true] + menu + button, .header-wrapper nav > button [aria-expanded=true] + menu + button:hover {
  background-color: var(--black);
  color: var(--colorBackground);
}
.header-wrapper nav [aria-expanded=true] + menu + button.login[aria-expanded=true], .header-wrapper nav [aria-expanded=true] + menu + button.login:hover {
  border-color: var(--black);
}
.header-wrapper nav > [data-toggle-state=opened] + a:last-child:hover {
  border-color: var(--black);
}
.header-wrapper nav > a:last-child {
  order: 3;
}
.header-wrapper nav > a:last-child:hover {
  background-color: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
@media screen and (max-width: 1024px) {
  .header-wrapper nav > a:last-child:hover {
    border-color: var(--black);
  }
}

.home-template .header-wrapper .logo-wrapper {
  gap: calc(1.3 * var(--gap));
}
.home-template .header-wrapper .logo-wrapper p {
  font-size: 114%;
}

.project-detail-template .header-wrapper {
  display: none;
}

@media screen and (min-height: 800px) {
  html:where(:is(.home-template, .registration-template, .calculation-template, .success-template, .closed-template)) .header-wrapper {
    position: sticky;
    top: 0;
  }
}
@media screen and (min-height: 600px) {
  html.content-template .header-wrapper {
    position: sticky;
    top: 0;
  }
}
html:where(.content-template) .content-wrapper > *:not(.mgnlEditor) {
  max-width: 80ch;
}
html:where(.content-template) .header-wrapper {
  padding-block-end: calc(2 * var(--gap));
}

.content-wrapper {
  margin: max(8em, 16vh) 14.2857142857% calc(6 * var(--gap)) calc(3.75 * var(--gap));
}
@media screen and (max-width: 1440px) {
  .content-wrapper {
    margin-inline: 7.1428571429%;
  }
}
@media screen and (max-width: 1440px) and (max-width: 1024px) {
  .content-wrapper {
    margin-inline: 5%;
    margin-top: calc(2 * var(--gap));
  }
}

.headline + .form-wrapper,
.text-wrapper + .title,
.headline + .title,
.home-template .headline + .button {
  margin-top: calc(2 * var(--gap));
}

.title + [data-accordion] {
  margin-top: var(--gap);
}

* + .download,
* + .file-wrapper {
  margin-top: calc(4 * var(--gap));
}

.download + .download,
.file-wrapper + .download,
.download + .file-wrapper {
  margin-top: var(--gap);
}

.title + .headline,
.download + *,
.file-wrapper + *,
.text-wrapper + .button,
* + .headline {
  margin-top: calc(2 * var(--gap));
}

.headline + .text-wrapper {
  margin-top: calc(2 * var(--gap));
}

[data-accordion] [data-accordion-content]:not(.overlay-wrapper) p:last-child {
  padding-bottom: calc(2 * var(--gap));
}
[data-accordion] [data-accordion-content]:not(.overlay-wrapper) p:first-child {
  padding-top: calc(2 * var(--gap));
}

.text-wrapper address a {
  text-decoration: none;
}

@media screen and (max-width: 850px) {
  .header-wrapper .language-wrapper {
    background-color: var(--yellow);
  }
}
@media screen and (max-width: 850px) and (min-width: 401px) {
  .header-wrapper .language-wrapper {
    margin-left: -100%;
  }
}
@media screen and (max-width: 850px) and (max-width: 400px) {
  html.receipt-template .header-wrapper .language-wrapper {
    margin-left: auto;
  }
}
@media screen and (max-width: 850px) {
  .header-wrapper .language-wrapper > *:where(:is(:not(button))) {
    margin-inline-start: calc(var(--gap) / 2);
  }
}
.page-wrapper footer {
  display: none !important;
  margin-block-start: auto;
  padding-block-start: calc(6 * var(--gap));
  background-color: var(--yellow);
  padding: 3em 5%;
}
@media screen and (max-width: 1024px) {
  .page-wrapper footer {
    display: block !important;
    position: relative;
  }
}
.page-wrapper footer address {
  display: grid;
  opacity: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  clip-path: none;
  gap: var(--gap);
}
.page-wrapper footer address p {
  font-size: 1.125em;
  line-height: 1.46;
}
.page-wrapper footer img {
  max-width: 9em;
}

/******* UNDER CONSTRUCTION *******/
@media screen and (max-width: 650px) {
  html:not(.receipt-template) main > div {
    overflow: hidden;
  }
  .header-wrapper menu:where([data-toggle-state=closed]) + .button {
    display: none;
  }
  .language-wrapper {
    z-index: 3;
  }
  #a11y-primary-navigation {
    flex-direction: row-reverse;
  }
  .header-wrapper button.button:hover {
    border-color: var(--black) !important;
  }
}
/******** basic text styles ********/
html {
  font-size: clamp(0.75rem, 0.64rem + 0.57vw, 1rem);
  overflow-y: scroll;
}
html.mobile form :where(input, select) {
  font-size: clamp(16px, 0.64rem + 0.57vw, 1rem);
}
@media screen and (min-width: 1025px) {
  html {
    font-size: clamp(1rem, 0.45rem + 0.52vw, 1.25rem);
  }
}

.text-wrapper > * {
  max-width: var(--maxTextLengthLarge);
}

form .text-wrapper > * {
  max-width: var(--maxTextLengthSmall);
}

form .text-wrapper.info-box {
  background-color: var(--yellow);
  padding: 1em;
  max-width: var(--maxTextLengthSmall);
}
form .text-wrapper.info-box > * {
  font-size: 100%;
}

form .headline + .info-box {
  margin-top: 0;
}

.text.text-justify,
.text-wrapper.text-justify {
  text-align: justify;
}
.text :where(p, li, h1, h2, h3, h4),
.text-wrapper :where(p, li, h1, h2, h3, h4) {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 4; /* For Safari */
  -ms-hyphenate-limit-chars: 10 3 4;
  hyphenate-limit-chars: 10 3 4;
}
.text > *,
.text-wrapper > * {
  line-height: var(--baseLineHeight);
}
.text :where(h1, h2, h3, h4),
.text-wrapper :where(h1, h2, h3, h4) {
  --fontSize: 1.6em;
  font-weight: bold;
  font-size: var(--fontSize);
  line-height: calc(var(--baseLineHeight) - var(--fontSize) / 7);
}
.text :where(p, ul, ol, h1, h2, h3, h4, table) + *:where(:is(:not(ul, ol, h1, h2, h3, h4, table))),
.text-wrapper :where(p, ul, ol, h1, h2, h3, h4, table) + *:where(:is(:not(ul, ol, h1, h2, h3, h4, table))) {
  padding-top: var(--baseLineHeight);
}
.text :where(p, ul, ol, h1, h2, h3, h4, table) + table,
.text-wrapper :where(p, ul, ol, h1, h2, h3, h4, table) + table {
  margin-top: var(--baseLineHeight);
}
.text * + *:where(:is(h1, h2, h3, h4)),
.text-wrapper * + *:where(:is(h1, h2, h3, h4)) {
  margin-top: calc(2 * var(--baseLineHeight));
}
.text :where(p, li) strong,
.text-wrapper :where(p, li) strong {
  font-weight: 600;
}
.text :where(p, li) strong *,
.text-wrapper :where(p, li) strong * {
  font-family: inherit;
  font-weight: inherit;
}
.text a:where(:is(:not(.button))),
.text-wrapper a:where(:is(:not(.button))) {
  text-decoration: underline;
  text-decoration-thickness: var(--borderWidth);
  text-underline-offset: calc(var(--borderWidth) * 2);
  text-decoration-color: var(--colorButton);
}
.text a:where(:is(:not(.button))):hover, .text a:where(:is(:not(.button))):focus-visible,
.text-wrapper a:where(:is(:not(.button))):hover,
.text-wrapper a:where(:is(:not(.button))):focus-visible {
  color: var(--colorAccent);
  text-decoration-color: var(--colorAccent);
}
.text > *,
.text-wrapper > * {
  font-size: 1.3125em;
}

.form-content .text > * {
  font-size: 1.125em;
}

.registration-template menu > :where([data-state]) * {
  font-weight: 600;
}

form fieldset .form-item :where(label, input, textarea, select) {
  font-size: 1.125em;
  max-width: calc(var(--maxTextLengthSmall) / 1.125);
}

.logo,
.headline {
  font-size: 2.625em;
  font-weight: 600;
}

.logo {
  font-size: 2.125em;
}

.headline {
  font-size: 1.8125em;
  font-weight: 600;
}

.home-template .headline,
.content-template .headline {
  font-size: 2em;
  font-weight: 600;
}

[data-accordion] .text-wrapper *,
[data-accordion-header]:not(.show-description),
.title {
  font-size: 1.5625em;
  line-height: var(--baseLineHeight);
}

[data-accordion] [data-accordion-content] > .text-wrapper {
  display: block;
}
[data-accordion] [data-accordion-content] > .text-wrapper a {
  font-size: 1em;
}

.title {
  font-weight: 600;
}

#primary-navigation a {
  font-size: 2.75em;
  font-weight: 600;
}
#primary-navigation a:hover, #primary-navigation a[data-state=selected] {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-underline-color: var(--black);
}

footer,
form legend,
form .legend {
  font-size: 87.5%;
}

.text-wrapper ul {
  list-style-type: none;
}
.text-wrapper ul li {
  position: relative;
}
.text-wrapper ul li::marker {
  display: none;
}
.text-wrapper ul li::before {
  position: absolute;
  top: 0;
  left: calc(var(--gap) * var(--textListOffsetFactor) * -1 / 3 * 2);
  content: "—";
  padding-block-start: calc(var(--baseLineHeight) / 3);
  font-weight: 600;
}

.project-detail-template {
  background-color: #fff;
  background-image: none;
}

.detail-text {
  grid-column: 1/3;
  background-color: #fff;
  margin: -1px 4em calc(3 * var(--gap)) 4em;
  padding-top: calc(2 * var(--gap));
  border-top: 1px solid var(--colorBorderLight);
}
.detail-text .text-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  font-size: 80%;
}
.detail-text .text-wrapper > * {
  max-width: 100% !important;
}
.detail-text .text-wrapper .headline > span {
  width: 0;
  min-width: 0;
  opacity: 1;
}
.detail-text .text-wrapper > .headline.accepted {
  position: relative;
  isolation: isolate;
}
.detail-text .text-wrapper > .headline.accepted::before {
  width: calc(var(--iconSizeSmall) / 2 * 1.2);
  height: calc(var(--iconSizeSmall) / 1.2 * 1.2);
  border-right: 3px solid var(--colorBackground);
  border-bottom: 3px solid var(--colorBackground);
  position: absolute;
  top: 0.4em;
  left: -1.5em;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  z-index: 0;
  color: var(--colorBackground);
  content: "";
}
.detail-text .text-wrapper > .headline.accepted::after {
  position: absolute;
  top: -0.45em;
  left: -2.5em;
  content: "";
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: -1;
  background-color: #61BC3D;
}
.detail-text .text-wrapper > .headline.rejected {
  position: relative;
  isolation: isolate;
}
.detail-text .text-wrapper > .headline.rejected span::before, .detail-text .text-wrapper > .headline.rejected::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: -2.2rem;
  width: 1.6rem;
  height: 3px;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  z-index: 2;
  background-color: var(--colorBackground);
}
.detail-text .text-wrapper > .headline.rejected span::before {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
  top: 0.7em;
}
.detail-text .text-wrapper > .headline.rejected::after {
  position: absolute;
  top: -0.45em;
  left: -2.5em;
  content: "";
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: -1;
  background-color: red;
}
.detail-text .text-wrapper span {
  width: min(40%, 15em);
  min-width: fit-content;
  display: inline-block;
  padding-right: var(--gap);
  font-size: 80%;
  opacity: 0.7;
}
.detail-text .text-wrapper span.large {
  width: min(70%, 18em);
}
.detail-text .text-wrapper input {
  padding: 0;
  min-width: 1em;
  width: min(50%, 12em);
}
.detail-text .text-wrapper * + p, .detail-text .text-wrapper p + p {
  padding-top: calc(var(--baseLineHeight) / 2);
}
.detail-text .text-wrapper p + h2 {
  margin-top: var(--baseLineHeight);
}
.detail-text > .flex {
  width: 100%;
  padding-top: calc(2 * var(--gap));
  border-top: 1px solid var(--colorBorderLight);
}
.detail-text > .flex > .grid {
  width: 50%;
}
.detail-text > .flex > .grid:first-child {
  padding-right: var(--gap);
}
.detail-text > .flex > .grid:last-child {
  padding-left: var(--gap);
}
.detail-text > .grid:last-child {
  padding-top: calc(2 * var(--gap));
  border-top: 1px solid var(--colorBorderLight);
}
.detail-text .detail-file-wrapper.text-wrapper span {
  width: min(40%, 14em);
}

/******** menu ********/
nav {
  position: relative;
}

[data-toggle-content]:not(.gap) {
  gap: 0;
}

[data-toggle-state=opened]:where(:is(:not(.text-wrapper))) {
  animation: clipPathCircleOpen 300ms ease-out forwards;
}

.language-wrapper[data-toggle-state=opened] {
  animation: clipPathLanguageOpen 300ms ease-out forwards;
}

[data-toggle-state=opened]:where(:is(.form-item-caption)),
#login-form[data-toggle-state=opened] {
  animation: clipPathVerticalOpen 300ms ease-out forwards;
}

[data-toggle-state=closing]:where(:is(:not(.text-wrapper))) {
  animation: clipPathCircleClose 300ms ease-in forwards;
}

.language-wrapper[data-toggle-state=closing] {
  animation: clipPathLanguageClose 300ms ease-in forwards;
}

[data-toggle-state=closing]:where(:is(.form-item-caption)),
#login-form[data-toggle-state=closing] {
  animation: clipPathVerticalClose 300ms ease-out forwards;
}

.edit-mode #login-form {
  display: grid !important;
}

html:where(:is(:not(.edit-mode))) #login-form[data-toggle-state=closed] {
  clip-path: inset(100% 0 0 0);
  transition: none;
  animation: none;
}

@media screen and (max-width: 1024px) {
  #login-form[data-toggle-state=closing] {
    animation: clipPathVerticalCloseInvert 100ms ease-out forwards;
  }
  .home-template main > .text-wrapper:first-child[data-toggle-state=opened] {
    animation: clipPathVerticalClose 300ms ease-out forwards;
    max-height: 9em;
    min-height: 9em;
    transition: max-height 300ms ease-out, min-height 300ms ease-out;
  }
  .home-template main > .text-wrapper:first-child[data-toggle-state=closing] {
    animation: clipPathVerticalClose 100ms ease-out forwards;
  }
  .home-template main > .text-wrapper:first-child[data-toggle-state=closed] {
    transition: none;
    clip-path: inset(0 0 0 0);
  }
}
nav [data-toggle-state=closed]:where(:is(:not(.language-wrapper, .text-wrapper))) {
  display: none;
}

@keyframes clipPathCircleOpen {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clipPathCircleClose {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes clipPathVerticalOpen {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clipPathVerticalClose {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes clipPathVerticalCloseInvert {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}
@media screen and (max-width: 1024px) {
  @keyframes clipPathCircleOpen {
    0% {
      clip-path: inset(0 0 100% 0);
    }
    100% {
      clip-path: inset(0 0 0 0);
    }
  }
  @keyframes clipPathCircleClose {
    0% {
      clip-path: inset(0 0 0 0);
    }
    100% {
      clip-path: inset(0 0 100% 0);
    }
  }
}
@keyframes clipPathLanguageOpen {
  0% {
    clip-path: inset(0 0 0 70%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clipPathLanguageClose {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 70%);
  }
}
fieldset [data-accordion-content],
[data-accordion] [data-accordion-content] {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 250ms, opacity 0ms !important;
  overflow: hidden;
  width: 100%;
}
fieldset[data-observe-wrapper],
[data-accordion][data-observe-wrapper] {
  overflow: visible;
}
fieldset [data-state=expanded],
[data-accordion] [data-state=expanded] {
  grid-template-rows: 1fr;
}
fieldset [data-accordion-content] .inside,
[data-accordion] [data-accordion-content] .inside {
  min-height: 0;
}
fieldset [data-accordion-header]:not(.show-description),
[data-accordion] [data-accordion-header]:not(.show-description) {
  padding-block: calc(var(--gap) / 3 * 2);
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  display: flex;
  align-items: center;
  gap: calc(2 * var(--gap));
  transition: border-bottom-color 30ms 240ms linear;
}
fieldset [data-accordion-header]:not(.show-description)::after,
[data-accordion] [data-accordion-header]:not(.show-description)::after {
  content: "";
  width: var(--gap);
  min-width: var(--gap);
  aspect-ratio: 1/1;
  border-top: 3px solid var(--black);
  border-right: 3px solid var(--black);
  margin: calc(var(--gap) / 2 * -1) 0.2em 0 auto;
  transform: rotate(135deg);
  transition: all 250ms ease-in-out;
}
fieldset [aria-expanded=true],
[data-accordion] [aria-expanded=true] {
  border-bottom-color: var(--colorBackground);
  transition: none;
}
fieldset [aria-expanded=true]::after,
[data-accordion] [aria-expanded=true]::after {
  transform: rotate(-45deg) !important;
  margin-top: calc(var(--gap) / 3) !important;
}
fieldset + [data-accordion],
[data-accordion] + [data-accordion] {
  margin-top: -2px;
}

fieldset > [data-state=expanded]:not(.has-set-values) + .form-toggle-button {
  display: flex;
  align-items: center;
  align-content: center;
}

fieldset > .form-toggle-button[aria-expanded=true]:not(.inverted) {
  display: none;
}

fieldset > .form-toggle-button.inverted {
  display: flex;
}

.toggle-fieldset,
.form-toggle-wrapper > .grid {
  gap: var(--baseLineHeight);
}

#login-form p {
  color: var(--colorGray);
}
#login-form p > * {
  color: var(--black);
}
#login-form p a {
  text-decoration: underline;
}

/******** buttons ********/
button.button, button.link {
  cursor: pointer;
}

.button,
.link {
  display: inline-block;
  justify-self: flex-start;
  max-width: var(--maxTextLengthLarge);
  line-height: var(--baseLineHeight);
}
.button[aria-expanded=true]:where(:not(:is([data-button-type=background]))), .button:where(:not(:is([data-button-type=background]))):hover, .button:where(:not(:is([data-button-type=background]))):focus-visible, .button:where(:not(:is([data-button-type=background])))[data-state=selected],
.link[aria-expanded=true]:where(:not(:is([data-button-type=background]))),
.link:where(:not(:is([data-button-type=background]))):hover,
.link:where(:not(:is([data-button-type=background]))):focus-visible,
.link:where(:not(:is([data-button-type=background])))[data-state=selected] {
  color: var(--colorAccent);
}
.button.variant,
.link.variant {
  --colorButton: var(--colorAccent);
}
.button.variant:where(:is(:not([data-button-type=background]))):where([aria-expanded=true]), .button.variant:where(:is(:not([data-button-type=background]))):hover, .button.variant:where(:is(:not([data-button-type=background]))):focus-visible, .button.variant:where(:is(:not([data-button-type=background])))[data-state=selected],
.link.variant:where(:is(:not([data-button-type=background]))):where([aria-expanded=true]),
.link.variant:where(:is(:not([data-button-type=background]))):hover,
.link.variant:where(:is(:not([data-button-type=background]))):focus-visible,
.link.variant:where(:is(:not([data-button-type=background])))[data-state=selected] {
  color: var(--colorButtonShade);
}
.button span,
.link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--maxButtonTextWidth);
}

.link {
  text-decoration: underline;
  text-decoration-thickness: var(--borderWidth);
  text-underline-offset: calc(var(--borderWidth) * 2);
  text-decoration-color: var(--colorButton);
}
.link[aria-expanded=true], .link:hover, .link:focus-visible, .link[data-state=selected] {
  text-decoration-color: var(--colorAccent);
}

.button {
  border: var(--borderWidth) var(--borderStyle) var(--colorButton);
  border-radius: var(--buttonBorderRadius);
  padding: calc(var(--buttonSpaceUnit) / 2) calc(var(--buttonSpaceUnit) * 2) calc(var(--buttonSpaceUnit) / 2) calc(var(--buttonSpaceUnit) * 2);
  transition: color var(--transitionDuration) var(--transitionEasing), background-color var(--transitionDuration) var(--transitionEasing), border-color var(--transitionDuration) var(--transitionEasing);
  font-size: 1.5em;
}
.button[aria-expanded=true], .button:hover, .button:focus-visible, .button[data-state=selected] {
  border-color: var(--colorAccent);
}
.button[aria-expanded=true]::before, .button[aria-expanded=true]::after, .button:hover::before, .button:hover::after, .button:focus-visible::before, .button:focus-visible::after, .button[data-state=selected]::before, .button[data-state=selected]::after {
  background-color: var(--colorAccent);
}
.button:where([data-button-type=background]) {
  background-color: var(--colorButton);
  color: var(--colorBackground);
}
.button:where([data-button-type=background]):is([data-icon])::before, .button:where([data-button-type=background]):is([data-icon])::after {
  background-color: var(--colorBackground);
}
.button:where([data-button-type=background])[aria-expanded=true], .button:where([data-button-type=background]):hover, .button:where([data-button-type=background]):focus-visible, .button:where([data-button-type=background])[data-state=selected] {
  background-color: var(--colorShade);
  border-color: var(--colorShade);
}
.button[data-button-style=circle] {
  padding: 0;
}
.button[data-button-style=square] {
  padding: 0;
  font-size: 0;
  border-radius: 0;
}
.button[data-button-style=rect] {
  border-radius: 0;
}
.button[type=submit], .button:not([href]) {
  background-color: var(--colorAccent);
  border-color: var(--colorAccent);
}
.button[type=submit]:hover, .button:not([href]):hover {
  background-color: var(--colorShade);
  border-color: var(--colorShade);
}
.button[type=submit][disabled], .button:not([href])[disabled] {
  background-color: var(--colorBorderLight);
  border-color: var(--colorBorderLight);
  cursor: default;
  pointer-events: none;
}

.header-wrapper button.button {
  background-color: var(--black);
  border-color: var(--black);
}
.header-wrapper button.button:hover {
  background-color: var(--yellow);
  border-color: var(--yellow);
}

#login-form button.button {
  font-size: 1.125em;
  padding: calc(var(--buttonSpaceUnit) / 2 + 0.2em) calc(var(--buttonSpaceUnit) * 1.5) calc(var(--buttonSpaceUnit) / 2 + 0.2em) calc(var(--buttonSpaceUnit) * 1.5);
}
#login-form button.button:hover {
  background-color: var(--colorAccent);
  border-color: var(--colorAccent);
}

:is([data-state=disabled]) {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

:is([data-icon]) {
  display: flex;
  align-items: center;
  gap: var(--buttonSpaceUnit);
}
:is([data-icon]).link {
  gap: calc(var(--buttonSpaceUnit) / 2);
}
:is([data-icon])::before, :is([data-icon])::after {
  display: block;
  height: var(--iconSizeSmall);
  width: var(--iconSizeSmall);
  min-width: var(--iconSizeSmall);
  max-width: var(--iconSizeSmall);
  background-color: var(--colorButton);
  pointer-events: none;
  clip-path: var(--clippathArrowForward);
}
:is([data-icon]):not([data-icon-position], [data-icon*=-backward])::after, :is([data-icon]):where([data-icon*=-forward])::after, :is([data-icon]):where([data-icon-position=end])::after {
  content: "";
}
:is([data-icon]):where([data-icon*=-backward])::before, :is([data-icon]):where([data-icon-position=start])::before {
  content: "";
}
:is([data-icon])[data-state=selected]::before, :is([data-icon])[data-state=selected]::after {
  background-color: var(--colorAccent);
}
:is([data-icon]):where(:not([data-button-type=background])[aria-expanded=true])::before, :is([data-icon]):where(:not([data-button-type=background])[aria-expanded=true])::after, :is([data-icon]):where(:not([data-button-type=background])):hover::before, :is([data-icon]):where(:not([data-button-type=background])):hover::after, :is([data-icon]):where(:not([data-button-type=background]))[data-button-type=background]:focus-visible::before, :is([data-icon]):where(:not([data-button-type=background]))[data-button-type=background]:focus-visible::after, :is([data-icon]):where(:not([data-button-type=background]))[data-button-type=background][data-state=selected]::before, :is([data-icon]):where(:not([data-button-type=background]))[data-button-type=background][data-state=selected]::after {
  background-color: var(--colorAccent);
}
:is([data-icon]):not([data-icon-position], [data-icon*=-backward], .link, [data-button-style=circle]), :is([data-icon]):not(.link):where([data-icon*=-forward]), :is([data-icon]):not(.link):where([data-icon-position=end]) {
  padding-inline-end: calc(var(--buttonSpaceUnit) * 1.2);
}
:is([data-icon]):not(.link):where([data-icon*=-backward]), :is([data-icon]):not(.link):where([data-icon-position=start]) {
  padding-inline-start: calc(var(--buttonSpaceUnit) * 1.2);
}
:is([data-icon])[data-button-style=circle]::before, :is([data-icon])[data-button-style=circle]::after {
  margin: calc(var(--buttonSpaceUnit) - 2 * var(--borderWidth));
  font-size: 1rem;
}
:is([data-icon])[data-button-style=square]::before, :is([data-icon])[data-button-style=square]::after {
  margin: calc(var(--buttonSpaceUnit) - 2 * var(--borderWidth));
  font-size: 1rem;
}

[data-icon*=hamburger]::before, [data-icon*=hamburger]::after {
  clip-path: var(--iconHamburger);
}

[data-icon*=columns]::before, [data-icon*=columns]::after {
  clip-path: var(--iconHamburger);
  transform: rotate(90deg);
}
[data-icon*=columns][data-icon*=-list]::before, [data-icon*=columns][data-icon*=-list]::after {
  clip-path: var(--iconListStart);
  transform: rotateZ(90deg) rotateX(180deg);
}

[data-icon*=list-]::before, [data-icon*=list-]::after {
  clip-path: var(--iconListStart);
}
[data-icon*=list-][data-icon*=-end]::before, [data-icon*=list-][data-icon*=-end]::after {
  transform: rotateY(180deg);
}

[data-icon*=close-]::before, [data-icon*=close-]::after {
  clip-path: var(--clippathClose);
}

[data-icon*=download-][data-icon*=-line]::before, [data-icon*=download-][data-icon*=-line]::after {
  clip-path: var(--clippathDownloadLine);
}
[data-icon*=download-][data-icon*=-box]::before, [data-icon*=download-][data-icon*=-box]::after {
  clip-path: var(--clippathDownloadBox);
}

[data-icon*=open-]::before, [data-icon*=open-]::after {
  clip-path: var(--clippathOpen);
}

[data-icon*=arrow-][data-icon*=-up]::before, [data-icon*=arrow-][data-icon*=-up]::after {
  clip-path: var(--clippathArrowUp);
}

[data-icon*=arrow-][data-icon*=-down]::before, [data-icon*=arrow-][data-icon*=-down]::after {
  clip-path: var(--clippathArrowDown);
}

[data-icon*=arrow-][data-icon*=-backward]::before, [data-icon*=arrow-][data-icon*=-backward]::after {
  clip-path: var(--clippathArrowBackward);
}

[data-icon*=arrow-][data-icon*=-forward-up]::before, [data-icon*=arrow-][data-icon*=-forward-up]::after {
  clip-path: var(--clippathArrowForwardUp);
}

[data-icon*=arrow-][data-icon*=-forward-down]::before, [data-icon*=arrow-][data-icon*=-forward-down]::after {
  clip-path: var(--clippathArrowForwardDown);
}

[data-icon*=arrow-][data-icon*=-backward-up]::before, [data-icon*=arrow-][data-icon*=-backward-up]::after {
  clip-path: var(--clippathArrowBackwardUp);
}

[data-icon*=arrow-][data-icon*=-backward-down]::before, [data-icon*=arrow-][data-icon*=-backward-down]::after {
  clip-path: var(--clippathArrowBackwardDown);
}

.button:where(:not([data-icon]))[data-button-style=circle], .button:where(:not([data-icon]))[data-button-style=square] {
  display: grid;
  padding: calc(var(--buttonSpaceUnit) / 2) calc(var(--buttonSpaceUnit) / 2) calc(var(--buttonSpaceUnit) / 2) calc(var(--buttonSpaceUnit) / 2);
  width: calc(var(--baseLineHeight) + var(--buttonSpaceUnit) + 2 * var(--borderWidth));
  height: calc(var(--baseLineHeight) + var(--buttonSpaceUnit) + 2 * var(--borderWidth));
  text-align: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button:where(:not([data-icon]))[data-button-style=square] {
  border-radius: 0;
}

.download {
  --colorButton: var(--colorAccent);
  background-color: var(--colorButton);
  border-color: var(--colorButton);
}

.download:hover {
  --colorButton: var(--colorShade);
  background-color: var(--colorButton);
  border-color: var(--colorButton);
}

.menu-button {
  padding: 0 !important;
}
.menu-button span {
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  height: 0;
  position: relative;
}
.menu-button span::after, .menu-button span::before {
  content: "";
  width: 1.2em;
  height: 3px;
  background-color: var(--colorBackground);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform var(--transitionDuration) var(--transitionEasing);
  transform-origin: center;
}
.menu-button span::before {
  transform: translateX(-50%) translateY(calc(-50% - 0.25em));
}
.menu-button span::after {
  transform: translateX(-50%) translateY(calc(-50% + 0.25em));
}
.menu-button:hover span::after, .menu-button:hover span::before {
  background-color: var(--black);
}
.menu-button[aria-expanded=true] span::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.menu-button[aria-expanded=true] span::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.menu-button[aria-expanded=true]:hover {
  border-color: var(--black) !important;
}

/******** form ********/
fieldset.grid,
fieldset.flex {
  gap: calc(1.5 * var(--gap));
}

form fieldset:not(.form-toggle-wrapper) + fieldset:not(.form-toggle-wrapper) {
  margin-top: calc(4 * var(--gap));
}

form fieldset:not(.form-toggle-wrapper) + fieldset.nst:not(.form-toggle-wrapper) {
  margin-top: var(--baseLineHeight);
}

fieldset.form-toggle-wrapper {
  display: none;
}

fieldset.form-toggle-wrapper[data-state=expanded] {
  display: grid;
}

form fieldset.form-toggle-wrapper[data-state=expanded] + .form-toggle-button + fieldset.form-toggle-wrapper[data-state=expanded] {
  margin-top: calc(2 * var(--gap));
  padding-top: calc(2 * var(--gap));
  border-top: 1px solid var(--colorBorderLight);
}

.form-item {
  --borderWidth: 1px;
  gap: calc(var(--gap) / 2);
  line-height: var(--baseLineHeight);
}
.form-item > *:where(:not(:is([type=checkbox], [type=radio], .mgnlEditor))) {
  max-width: var(--maxTextLengthSmall);
}
.form-item input:focus, .form-item input:checked, .form-item textarea:focus, .form-item select:focus {
  border-color: var(--black);
}
.form-item input:focus + label, .form-item input:checked + label, .form-item textarea:focus + label, .form-item select:focus + label {
  color: var(--black);
}
[data-observe-wrapper=incomplete] .form-item .select-wrapper:has([data-observe=incomplete])::after {
  border-color: red;
}
.form-item select[data-observe=incomplete]:focus, .form-item select[data-observe=incomplete]:focus-visible {
  color: red;
  border-color: red;
}
.form-item :where(input, textarea, select), .form-item .grow-wrap::after {
  border: var(--borderWidth) var(--borderStyle) var(--colorBorderLight);
  border-radius: 0.44em;
}

textarea,
select,
input:where(:not(:is([type=checkbox], [type=radio]))) {
  --buttonSpaceInline: calc(var(--gap) / 2);
  --buttonSpaceBlock: calc(var(--gap) / 2);
  padding: var(--buttonSpaceBlock) calc(4 * var(--buttonSpaceInside)) var(--buttonSpaceBlock) var(--buttonSpaceInside);
}

input[type=number], input[type=date] {
  padding: var(--buttonSpaceBlock) var(--buttonSpaceInside);
}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: calc(50ch - 7em);
  flex-basis: calc(50ch - 7em);
  background-color: transparent;
  cursor: pointer;
}

.mobile input[type=date] {
  min-height: calc(var(--baseLineHeight) + 2 * var(--buttonSpaceBlock) + 1px);
}

input:where(:not(:is([type=checkbox], [type=radio], [type=file], [type=date]))) {
  --buttonSpaceBlock: calc(var(--gap) / 2 + 1px);
}

input:where(:not(:is([type=checkbox], [type=radio]))) {
  min-width: 1em;
}

textarea::placeholder, textarea::-webkit-datetime-edit,
input::placeholder,
input::-webkit-datetime-edit {
  color: var(--colorGray);
}

input[type=date] {
  display: flex;
  text-transform: uppercase;
  cursor: text;
}
input[type=date]::-webkit-datetime-edit {
  overflow: visible;
}
input[type=date].has-date::-webkit-datetime-edit {
  color: var(--black) !important;
}

input[data-number-is-iban] {
  text-transform: uppercase;
}

input[data-number-is-iban]:valid {
  color: var(--black);
}

input[data-number-is-iban][data-validator=false]:valid,
input[data-number-is-iban]:invalid {
  color: #ff0000;
}

.form-edit-icon-wrapper {
  position: relative;
  isolation: isolate;
}
.form-edit-icon-wrapper::before {
  content: "";
  clip-path: url(#svg-edit-icon);
  width: calc(0.9 * var(--iconSizeSmall));
  height: calc(0.9 * var(--iconSizeSmall));
  background-color: var(--colorBorderLight);
  display: block;
  position: absolute;
  top: calc(var(--baseLineHeight) / 2 + var(--gap) / 4);
  right: calc(0.8 * var(--iconSizeSmall));
  pointer-events: none;
  z-index: 2;
}
.form-edit-icon-wrapper.date-wrapper::before {
  clip-path: url(#svg-date-icon);
  pointer-events: none;
}
.form-edit-icon-wrapper.number-wrapper::after, .form-edit-icon-wrapper.date-wrapper::after {
  content: "";
  width: var(--iconSizeSmall);
  height: var(--iconSizeSmall);
  background-color: var(--colorBackground);
  display: block;
  position: absolute;
  top: calc(var(--baseLineHeight) / 2 + var(--gap) / 4);
  right: calc(0.8 * var(--iconSizeSmall));
  transform: scale(1.5, 1.5);
  transform-origin: center;
  pointer-events: none;
  z-index: 1;
}
.form-edit-icon-wrapper.number-wrapper:hover::after, .form-edit-icon-wrapper.number-wrapper:focus-within::after {
  opacity: 0;
  pointer-events: none;
}
.form-edit-icon-wrapper.grow-wrap::before {
  top: calc(0.8 * var(--iconSizeSmall));
  transform: none;
}
.form-edit-icon-wrapper.number-wrapper::before {
  transition: opacity var(--transitionDuration) var(--transitionEasing);
}
.form-edit-icon-wrapper.number-wrapper:hover::before, .form-edit-icon-wrapper.number-wrapper:focus-within::before {
  opacity: 0;
}

.grow-wrap {
  display: grid;
  width: 100%;
}
.grow-wrap textarea {
  resize: none;
  overflow: hidden;
  width: 100%;
}
.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  padding: calc(var(--gap) / 2);
  padding-bottom: 0;
  white-space: pre-wrap;
  visibility: hidden;
}
.grow-wrap textarea, .grow-wrap::after {
  grid-area: 1/1/2/2;
}

.select-wrapper {
  position: relative;
}
.select-wrapper select {
  width: 100%;
  color: var(--colorGray);
  padding-block: calc(var(--buttonSpaceBlock) + 1px);
}
.select-wrapper select.is-selected {
  color: var(--black);
}
.select-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: var(--gap);
  margin-top: -0.1em;
  width: calc(var(--iconSizeSmall) * 0.75);
  height: calc(var(--iconSizeSmall) * 0.75);
  transform: translateY(-50%) rotate(45deg);
  border-right: 3px solid var(--colorBorderLight);
  border-bottom: 3px solid var(--colorBorderLight);
  pointer-events: none;
}
.select-wrapper:has(.is-selected)::after {
  border-color: var(--black);
}
.select-wrapper[data-observe=complete]::after, .select-wrapper:focus-within::after {
  border-color: var(--black);
}

.form-control {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.form-item label + .form-control, .form-control + .form-control {
  margin-top: var(--buttonSpaceBlock);
}
.form-control input:where([type=checkbox], [type=radio]) {
  width: calc(var(--iconSizeLarge) * 1.2);
  height: calc(var(--iconSizeLarge) * 1.2);
  min-width: calc(var(--iconSizeLarge) * 1.2);
  min-height: calc(var(--iconSizeLarge) * 1.2);
}
.form-control :where([type=radio]) {
  border-radius: var(--borderRadius);
}
.form-control :where([type=radio], [type=checkbox]):checked {
  outline: calc(var(--borderWidth) * 6) var(--borderStyle) var(--colorBackground);
  outline-offset: calc(var(--borderWidth) * -7);
  position: relative;
}
.form-control :where([type=radio]):checked {
  background-color: var(--colorAccent);
}
.form-control :where([type=checkbox]):checked::after {
  content: "";
  width: calc(var(--iconSizeSmall) / 2);
  height: calc(var(--iconSizeSmall) / 1.2);
  border-right: 4px solid var(--colorAccent);
  border-bottom: 4px solid var(--colorAccent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  margin-top: -0.1em;
}

[data-control-style=horizontal] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 2) var(--gap);
}
[data-control-style=horizontal] label, [data-control-style=horizontal] legend, [data-control-style=horizontal] .legend {
  width: 100%;
  max-width: 100%;
}

.form-item[data-validator=false] > input[type=text],
.form-item[data-validator=false] textarea,
.form-item[data-validator=false] .select-wrapper > select {
  border-color: var(--colorAccent);
}
.form-item[data-validator=false] > input[type=text]::placeholder,
.form-item[data-validator=false] textarea::placeholder,
.form-item[data-validator=false] .select-wrapper > select::placeholder {
  color: rgba(248, 43, 53, 0.5);
}

.form-item[data-validator=false] .select-wrapper > select {
  color: rgba(248, 43, 53, 0.5);
}
.form-item[data-validator=false] .select-wrapper svg * {
  stroke: var(--colorAccent);
}

.registration-template main > div:first-child,
.calculation-template main > div:first-child,
.success-template main > div:first-child,
.closed-template main > div:first-child {
  z-index: 1;
}
@media screen and (min-height: 800px) and (max-width: 1024px) {
  .registration-template main > div:first-child,
.calculation-template main > div:first-child,
.success-template main > div:first-child,
.closed-template main > div:first-child {
    position: sticky;
    top: 0;
  }
}
@media screen and (min-height: 651px) and (min-width: 1025px) {
  .registration-template main > div:first-child menu,
.calculation-template main > div:first-child menu,
.success-template main > div:first-child menu,
.closed-template main > div:first-child menu {
    position: sticky;
    top: max(7.65em, 16vh - 0.35em);
    margin-block-end: 10em;
  }
}
.registration-template main menu,
.calculation-template main menu,
.success-template main menu,
.closed-template main menu {
  position: relative;
  margin-block-start: max(9.65em, 16vh - 0.35em);
  margin-inline-end: var(--gap);
  margin-block-end: calc(3 * var(--gap));
  margin-inline-start: 33.3333333333%;
  counter-reset: item-counter;
  isolation: isolate;
}
.registration-template main menu::after,
.calculation-template main menu::after,
.success-template main menu::after,
.closed-template main menu::after {
  content: "";
  position: absolute;
  top: var(--baseLineHeight);
  bottom: var(--baseLineHeight);
  left: var(--baseLineHeight);
  width: 1px;
  background-color: var(--black);
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  .registration-template main menu::after,
.calculation-template main menu::after,
.success-template main menu::after,
.closed-template main menu::after {
    display: none;
  }
}
.registration-template main menu li,
.calculation-template main menu li,
.success-template main menu li,
.closed-template main menu li {
  counter-increment: item-counter;
}
@media screen and (max-width: 1024px) {
  .registration-template main menu li:first-child,
.calculation-template main menu li:first-child,
.success-template main menu li:first-child,
.closed-template main menu li:first-child {
    margin-left: 5%;
  }
}
.registration-template main menu li:not([data-state=inactive]) .anchor-item:hover span:first-child, .registration-template main menu li:not([data-state=inactive]) .anchor-item-link:hover span:first-child,
.calculation-template main menu li:not([data-state=inactive]) .anchor-item:hover span:first-child,
.calculation-template main menu li:not([data-state=inactive]) .anchor-item-link:hover span:first-child,
.success-template main menu li:not([data-state=inactive]) .anchor-item:hover span:first-child,
.success-template main menu li:not([data-state=inactive]) .anchor-item-link:hover span:first-child,
.closed-template main menu li:not([data-state=inactive]) .anchor-item:hover span:first-child,
.closed-template main menu li:not([data-state=inactive]) .anchor-item-link:hover span:first-child {
  background-color: var(--black);
  color: var(--colorBackground);
}
.registration-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item span:first-child, .registration-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item-link span:first-child,
.calculation-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item span:first-child,
.calculation-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item-link span:first-child,
.success-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item span:first-child,
.success-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item-link span:first-child,
.closed-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item span:first-child,
.closed-template main menu li:not([data-state=done], [data-state=inactive]) .anchor-item-link span:first-child {
  background-color: var(--black);
  color: var(--yellow);
}
.registration-template main menu li:is([data-state=done]) .anchor-item span:first-child, .registration-template main menu li:is([data-state=done]) .anchor-item-link span:first-child,
.calculation-template main menu li:is([data-state=done]) .anchor-item span:first-child,
.calculation-template main menu li:is([data-state=done]) .anchor-item-link span:first-child,
.success-template main menu li:is([data-state=done]) .anchor-item span:first-child,
.success-template main menu li:is([data-state=done]) .anchor-item-link span:first-child,
.closed-template main menu li:is([data-state=done]) .anchor-item span:first-child,
.closed-template main menu li:is([data-state=done]) .anchor-item-link span:first-child {
  background-color: var(--black);
  color: var(--colorBackground);
}
.registration-template main menu li:is([data-state=incorrect]) .anchor-item span:first-child, .registration-template main menu li:is([data-state=incorrect]) .anchor-item-link span:first-child,
.calculation-template main menu li:is([data-state=incorrect]) .anchor-item span:first-child,
.calculation-template main menu li:is([data-state=incorrect]) .anchor-item-link span:first-child,
.success-template main menu li:is([data-state=incorrect]) .anchor-item span:first-child,
.success-template main menu li:is([data-state=incorrect]) .anchor-item-link span:first-child,
.closed-template main menu li:is([data-state=incorrect]) .anchor-item span:first-child,
.closed-template main menu li:is([data-state=incorrect]) .anchor-item-link span:first-child {
  background-color: red;
  color: var(--yellow);
}
.registration-template main menu li a:hover,
.calculation-template main menu li a:hover,
.success-template main menu li a:hover,
.closed-template main menu li a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.1em;
  text-underline-color: var(--black);
}
.registration-template main menu li .anchor-item, .registration-template main menu li .anchor-item-link,
.calculation-template main menu li .anchor-item,
.calculation-template main menu li .anchor-item-link,
.success-template main menu li .anchor-item,
.success-template main menu li .anchor-item-link,
.closed-template main menu li .anchor-item,
.closed-template main menu li .anchor-item-link {
  display: flex;
  align-items: center;
}
.registration-template main menu li .anchor-item span:last-child, .registration-template main menu li .anchor-item-link span:last-child,
.calculation-template main menu li .anchor-item span:last-child,
.calculation-template main menu li .anchor-item-link span:last-child,
.success-template main menu li .anchor-item span:last-child,
.success-template main menu li .anchor-item-link span:last-child,
.closed-template main menu li .anchor-item span:last-child,
.closed-template main menu li .anchor-item-link span:last-child {
  line-height: 1.1;
  font-weight: 600;
  padding-bottom: 0.1em;
}
@media screen and (max-width: 1024px) {
  .registration-template main menu li .anchor-item, .registration-template main menu li .anchor-item-link,
.calculation-template main menu li .anchor-item,
.calculation-template main menu li .anchor-item-link,
.success-template main menu li .anchor-item,
.success-template main menu li .anchor-item-link,
.closed-template main menu li .anchor-item,
.closed-template main menu li .anchor-item-link {
    isolation: isolate;
  }
  .registration-template main menu li .anchor-item span:last-child, .registration-template main menu li .anchor-item-link span:last-child,
.calculation-template main menu li .anchor-item span:last-child,
.calculation-template main menu li .anchor-item-link span:last-child,
.success-template main menu li .anchor-item span:last-child,
.success-template main menu li .anchor-item-link span:last-child,
.closed-template main menu li .anchor-item span:last-child,
.closed-template main menu li .anchor-item-link span:last-child {
    position: absolute;
    left: 30em;
    width: calc(100vw - 32em);
    opacity: 0;
    pointer-events: none;
  }
  .registration-template main menu li .anchor-item::after, .registration-template main menu li .anchor-item-link::after,
.calculation-template main menu li .anchor-item::after,
.calculation-template main menu li .anchor-item-link::after,
.success-template main menu li .anchor-item::after,
.success-template main menu li .anchor-item-link::after,
.closed-template main menu li .anchor-item::after,
.closed-template main menu li .anchor-item-link::after {
    content: "";
    width: calc(3 * var(--gap));
    height: 1px;
    background-color: var(--black);
    top: 50%;
    position: relative;
    margin: 0 calc(var(--gap) * -1) 0 calc(2 * var(--gap) * -1);
    z-index: -1;
  }
}
.registration-template main menu li:last-child .anchor-item::after, .registration-template main menu li:last-child .anchor-item-link::after,
.calculation-template main menu li:last-child .anchor-item::after,
.calculation-template main menu li:last-child .anchor-item-link::after,
.success-template main menu li:last-child .anchor-item::after,
.success-template main menu li:last-child .anchor-item-link::after,
.closed-template main menu li:last-child .anchor-item::after,
.closed-template main menu li:last-child .anchor-item-link::after {
  display: none;
}
.registration-template main menu li .anchor-item span:first-child, .registration-template main menu li .anchor-item-link span:first-child,
.calculation-template main menu li .anchor-item span:first-child,
.calculation-template main menu li .anchor-item-link span:first-child,
.success-template main menu li .anchor-item span:first-child,
.success-template main menu li .anchor-item-link span:first-child,
.closed-template main menu li .anchor-item span:first-child,
.closed-template main menu li .anchor-item-link span:first-child {
  content: counter(item-counter);
  border-radius: 50%;
  width: calc(2 * var(--gap));
  min-width: calc(2 * var(--gap));
  line-height: calc(1.85 * var(--gap));
  font-size: 1.5em;
  font-weight: 600;
  height: calc(2 * var(--gap));
  padding-top: 0.1em;
  display: block;
  text-align: center;
  background: var(--black);
  margin-inline-end: var(--gap);
  margin-block: min(var(--gap) / 1.5 / 1.5, 1.5vh);
  color: var(--yellow);
  transition: all 250ms ease-in-out;
}
@media screen and (max-width: 1024px) {
  .registration-template main menu li .anchor-item span:first-child, .registration-template main menu li .anchor-item-link span:first-child,
.calculation-template main menu li .anchor-item span:first-child,
.calculation-template main menu li .anchor-item-link span:first-child,
.success-template main menu li .anchor-item span:first-child,
.success-template main menu li .anchor-item-link span:first-child,
.closed-template main menu li .anchor-item span:first-child,
.closed-template main menu li .anchor-item-link span:first-child {
    margin-inline-end: calc(var(--gap) / 2);
  }
}
@media screen and (max-width: 400px) {
  .registration-template main menu li .anchor-item span:first-child, .registration-template main menu li .anchor-item-link span:first-child,
.calculation-template main menu li .anchor-item span:first-child,
.calculation-template main menu li .anchor-item-link span:first-child,
.success-template main menu li .anchor-item span:first-child,
.success-template main menu li .anchor-item-link span:first-child,
.closed-template main menu li .anchor-item span:first-child,
.closed-template main menu li .anchor-item-link span:first-child {
    font-size: 5vw;
  }
}
.registration-template main menu li:where([data-state=inactive]) .anchor-item span:first-child, .registration-template main menu li:where([data-state=inactive]) .anchor-item-link span:first-child,
.calculation-template main menu li:where([data-state=inactive]) .anchor-item span:first-child,
.calculation-template main menu li:where([data-state=inactive]) .anchor-item-link span:first-child,
.success-template main menu li:where([data-state=inactive]) .anchor-item span:first-child,
.success-template main menu li:where([data-state=inactive]) .anchor-item-link span:first-child,
.closed-template main menu li:where([data-state=inactive]) .anchor-item span:first-child,
.closed-template main menu li:where([data-state=inactive]) .anchor-item-link span:first-child {
  color: var(--black);
  background-color: var(--yellow);
  border: 1px solid var(--black);
}
.registration-template main menu li:where([data-state=selected]) .anchor-item span:first-child, .registration-template main menu li:where([data-state=selected]) .anchor-item-link span:first-child,
.calculation-template main menu li:where([data-state=selected]) .anchor-item span:first-child,
.calculation-template main menu li:where([data-state=selected]) .anchor-item-link span:first-child,
.success-template main menu li:where([data-state=selected]) .anchor-item span:first-child,
.success-template main menu li:where([data-state=selected]) .anchor-item-link span:first-child,
.closed-template main menu li:where([data-state=selected]) .anchor-item span:first-child,
.closed-template main menu li:where([data-state=selected]) .anchor-item-link span:first-child {
  color: var(--colorBackground);
}
@media screen and (max-width: 1024px) {
  .registration-template main menu,
.calculation-template main menu,
.success-template main menu,
.closed-template main menu {
    background-color: var(--yellow);
  }
  .registration-template main menu:hover li[data-state=selected] span:last-child,
.calculation-template main menu:hover li[data-state=selected] span:last-child,
.success-template main menu:hover li[data-state=selected] span:last-child,
.closed-template main menu:hover li[data-state=selected] span:last-child {
    opacity: 0;
    pointer-events: none;
  }
  .registration-template main menu:hover .anchor-item:hover span:last-child, .registration-template main menu:hover .anchor-item-link:hover span:last-child,
.calculation-template main menu:hover .anchor-item:hover span:last-child,
.calculation-template main menu:hover .anchor-item-link:hover span:last-child,
.success-template main menu:hover .anchor-item:hover span:last-child,
.success-template main menu:hover .anchor-item-link:hover span:last-child,
.closed-template main menu:hover .anchor-item:hover span:last-child,
.closed-template main menu:hover .anchor-item-link:hover span:last-child {
    opacity: 1;
    pointer-events: auto;
  }
}
.registration-template .content-wrapper,
.calculation-template .content-wrapper,
.success-template .content-wrapper,
.closed-template .content-wrapper {
  align-items: flex-start;
  gap: calc(2 * var(--gap));
}
@media screen and (max-width: 700px) {
  .registration-template .content-wrapper,
.calculation-template .content-wrapper,
.success-template .content-wrapper,
.closed-template .content-wrapper {
    flex-direction: column;
  }
}
.registration-template .content-wrapper .form-content,
.calculation-template .content-wrapper .form-content,
.success-template .content-wrapper .form-content,
.closed-template .content-wrapper .form-content {
  flex-basis: 100%;
}
@media screen and (max-width: 700px) {
  .registration-template .content-wrapper .form-content,
.calculation-template .content-wrapper .form-content,
.success-template .content-wrapper .form-content,
.closed-template .content-wrapper .form-content {
    width: 100%;
  }
}
.registration-template .content-wrapper .form-content > *:not(.mgnlEditor),
.calculation-template .content-wrapper .form-content > *:not(.mgnlEditor),
.success-template .content-wrapper .form-content > *:not(.mgnlEditor),
.closed-template .content-wrapper .form-content > *:not(.mgnlEditor) {
  max-width: 60ch;
}
@media screen and (max-width: 700px) {
  .registration-template .content-wrapper .form-content *:not(.mgnlEditor),
.calculation-template .content-wrapper .form-content *:not(.mgnlEditor),
.success-template .content-wrapper .form-content *:not(.mgnlEditor),
.closed-template .content-wrapper .form-content *:not(.mgnlEditor) {
    max-width: 100% !important;
  }
}
.registration-template .content-wrapper .status-wrapper,
.calculation-template .content-wrapper .status-wrapper,
.success-template .content-wrapper .status-wrapper,
.closed-template .content-wrapper .status-wrapper {
  display: grid;
  gap: var(--gap);
  width: max(34em, 20%);
}
@media screen and (min-width: 601px) {
  .registration-template .content-wrapper .status-wrapper.active,
.calculation-template .content-wrapper .status-wrapper.active,
.success-template .content-wrapper .status-wrapper.active,
.closed-template .content-wrapper .status-wrapper.active {
    top: calc((2 * var(--gap) + var(--buttonSpaceUnit) + 2 * var(--baseLineHeight) - var(--borderWidth)) * -1) !important;
    margin-bottom: calc((2 * var(--gap) + var(--buttonSpaceUnit) + 2 * var(--baseLineHeight) - var(--borderWidth)) * -1) !important;
  }
}
.registration-template .content-wrapper .status-wrapper .text-wrapper,
.calculation-template .content-wrapper .status-wrapper .text-wrapper,
.success-template .content-wrapper .status-wrapper .text-wrapper,
.closed-template .content-wrapper .status-wrapper .text-wrapper {
  padding: calc(2 * var(--gap));
  background-color: var(--grey);
  border-radius: 0.5em;
  max-width: 22em;
}
.registration-template .content-wrapper .status-wrapper .text-wrapper p.large,
.calculation-template .content-wrapper .status-wrapper .text-wrapper p.large,
.success-template .content-wrapper .status-wrapper .text-wrapper p.large,
.closed-template .content-wrapper .status-wrapper .text-wrapper p.large {
  font-size: 1.3125em;
  font-weight: 600;
  line-height: 1.2;
}
.registration-template .content-wrapper .status-wrapper .text-wrapper p.large + p:not(.large),
.calculation-template .content-wrapper .status-wrapper .text-wrapper p.large + p:not(.large),
.success-template .content-wrapper .status-wrapper .text-wrapper p.large + p:not(.large),
.closed-template .content-wrapper .status-wrapper .text-wrapper p.large + p:not(.large) {
  margin-top: 1em;
}
.registration-template .content-wrapper .status-wrapper .text-wrapper p:not(.large):where(:nth-child(2), :nth-child(4)),
.calculation-template .content-wrapper .status-wrapper .text-wrapper p:not(.large):where(:nth-child(2), :nth-child(4)),
.success-template .content-wrapper .status-wrapper .text-wrapper p:not(.large):where(:nth-child(2), :nth-child(4)),
.closed-template .content-wrapper .status-wrapper .text-wrapper p:not(.large):where(:nth-child(2), :nth-child(4)) {
  padding-top: var(--baseLineHeight);
}
@media screen and (min-height: 600px) {
  .registration-template .content-wrapper .status-wrapper,
.calculation-template .content-wrapper .status-wrapper,
.success-template .content-wrapper .status-wrapper,
.closed-template .content-wrapper .status-wrapper {
    position: sticky;
    top: max(8em, 16vh);
  }
}
@media screen and (max-height: 599px) {
  .registration-template .content-wrapper .status-wrapper,
.calculation-template .content-wrapper .status-wrapper,
.success-template .content-wrapper .status-wrapper,
.closed-template .content-wrapper .status-wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  .registration-template .content-wrapper .status-wrapper,
.calculation-template .content-wrapper .status-wrapper,
.success-template .content-wrapper .status-wrapper,
.closed-template .content-wrapper .status-wrapper {
    top: auto;
    bottom: auto;
    position: relative;
    width: 100%;
  }
  .registration-template .content-wrapper .status-wrapper .text-wrapper,
.calculation-template .content-wrapper .status-wrapper .text-wrapper,
.success-template .content-wrapper .status-wrapper .text-wrapper,
.closed-template .content-wrapper .status-wrapper .text-wrapper {
    width: 100%;
    max-width: 100%;
  }
}
.registration-template .content-wrapper .status-wrapper .text-wrapper > *,
.calculation-template .content-wrapper .status-wrapper .text-wrapper > *,
.success-template .content-wrapper .status-wrapper .text-wrapper > *,
.closed-template .content-wrapper .status-wrapper .text-wrapper > * {
  font-size: 100%;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 700px) {
  .registration-template .content-wrapper .status-wrapper,
.calculation-template .content-wrapper .status-wrapper,
.success-template .content-wrapper .status-wrapper,
.closed-template .content-wrapper .status-wrapper {
    position: relative;
    display: grid !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
  }
  .registration-template .content-wrapper .status-wrapper .text-wrapper,
.calculation-template .content-wrapper .status-wrapper .text-wrapper,
.success-template .content-wrapper .status-wrapper .text-wrapper,
.closed-template .content-wrapper .status-wrapper .text-wrapper {
    display: none;
    margin: 0;
    width: auto;
  }
}
.registration-template .content-wrapper .status-wrapper button,
.calculation-template .content-wrapper .status-wrapper button,
.success-template .content-wrapper .status-wrapper button,
.closed-template .content-wrapper .status-wrapper button {
  position: absolute;
  right: 0;
  top: calc((var(--buttonSpaceUnit) + 2 * var(--baseLineHeight) - var(--borderWidth)) * -1);
  background-color: var(--black);
  border-color: var(--black);
  color: var(--colorBackground);
}
@media screen and (max-width: 600px) {
  .registration-template .content-wrapper .status-wrapper button:not(.hide-status),
.calculation-template .content-wrapper .status-wrapper button:not(.hide-status),
.success-template .content-wrapper .status-wrapper button:not(.hide-status),
.closed-template .content-wrapper .status-wrapper button:not(.hide-status) {
    position: relative;
    top: 0;
  }
}
.registration-template .content-wrapper .status-wrapper button:hover,
.calculation-template .content-wrapper .status-wrapper button:hover,
.success-template .content-wrapper .status-wrapper button:hover,
.closed-template .content-wrapper .status-wrapper button:hover {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: var(--black);
}
@media screen and (min-width: 701px) {
  .registration-template .content-wrapper .status-wrapper button,
.calculation-template .content-wrapper .status-wrapper button,
.success-template .content-wrapper .status-wrapper button,
.closed-template .content-wrapper .status-wrapper button {
    display: none;
  }
}
.registration-template .content-wrapper .status-wrapper button.hide-status,
.calculation-template .content-wrapper .status-wrapper button.hide-status,
.success-template .content-wrapper .status-wrapper button.hide-status,
.closed-template .content-wrapper .status-wrapper button.hide-status {
  width: calc(2 * var(--gap));
  height: calc(2 * var(--gap));
  min-width: calc(2 * var(--gap));
  min-height: calc(2 * var(--gap));
  border: 2px solid var(--black);
  border-radius: 50%;
  background-color: transparent;
  display: none;
}
.registration-template .content-wrapper .status-wrapper button.hide-status::after, .registration-template .content-wrapper .status-wrapper button.hide-status::before,
.calculation-template .content-wrapper .status-wrapper button.hide-status::after,
.calculation-template .content-wrapper .status-wrapper button.hide-status::before,
.success-template .content-wrapper .status-wrapper button.hide-status::after,
.success-template .content-wrapper .status-wrapper button.hide-status::before,
.closed-template .content-wrapper .status-wrapper button.hide-status::after,
.closed-template .content-wrapper .status-wrapper button.hide-status::before {
  content: "";
  width: 1.2em;
  height: 3px;
  background: var(--black);
  transform-origin: center;
  position: absolute;
  top: 50%;
  left: 50%;
}
.registration-template .content-wrapper .status-wrapper button.hide-status::before,
.calculation-template .content-wrapper .status-wrapper button.hide-status::before,
.success-template .content-wrapper .status-wrapper button.hide-status::before,
.closed-template .content-wrapper .status-wrapper button.hide-status::before {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
.registration-template .content-wrapper .status-wrapper button.hide-status::after,
.calculation-template .content-wrapper .status-wrapper button.hide-status::after,
.success-template .content-wrapper .status-wrapper button.hide-status::after,
.closed-template .content-wrapper .status-wrapper button.hide-status::after {
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
.registration-template .content-wrapper .status-wrapper.active .text-wrapper,
.calculation-template .content-wrapper .status-wrapper.active .text-wrapper,
.success-template .content-wrapper .status-wrapper.active .text-wrapper,
.closed-template .content-wrapper .status-wrapper.active .text-wrapper {
  display: block;
}
.registration-template .content-wrapper .status-wrapper.active .text-wrapper p:not(.large):first-child,
.calculation-template .content-wrapper .status-wrapper.active .text-wrapper p:not(.large):first-child,
.success-template .content-wrapper .status-wrapper.active .text-wrapper p:not(.large):first-child,
.closed-template .content-wrapper .status-wrapper.active .text-wrapper p:not(.large):first-child {
  padding-right: 3em;
}
.registration-template .content-wrapper .status-wrapper.active .hide-status,
.calculation-template .content-wrapper .status-wrapper.active .hide-status,
.success-template .content-wrapper .status-wrapper.active .hide-status,
.closed-template .content-wrapper .status-wrapper.active .hide-status {
  display: block;
  top: var(--gap);
  right: var(--gap);
}
.registration-template .content-wrapper .status-wrapper.active .show-status,
.calculation-template .content-wrapper .status-wrapper.active .show-status,
.success-template .content-wrapper .status-wrapper.active .show-status,
.closed-template .content-wrapper .status-wrapper.active .show-status {
  display: none;
}
@media screen and (max-width: 1440px) {
  .registration-template main menu,
.calculation-template main menu,
.success-template main menu,
.closed-template main menu {
    margin-inline-start: 16.6666666667%;
  }
}
@media screen and (max-width: 1440px) and (max-width: 1024px) {
  .registration-template main menu.flex,
.calculation-template main menu.flex,
.success-template main menu.flex,
.closed-template main menu.flex {
    margin: 7em 0 0 0;
    padding-bottom: var(--gap);
    flex-direction: row;
  }
}
@media screen and (max-width: 1024px) {
  .registration-template address,
.calculation-template address,
.success-template address,
.closed-template address {
    clip-path: inset(-1px -1px -1px);
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

.success-template .content-wrapper .status-wrapper .text-wrapper, .closed-template .content-wrapper .content-wrapper .status-wrapper .text-wrapper {
  background: var(--yellow);
}

.calculation-template .content-wrapper .status-wrapper {
  position: sticky;
  top: max(7em, 14vh + 1.35em);
}
@media screen and (max-width: 700px) {
  .calculation-template .content-wrapper .status-wrapper {
    position: relative;
  }
}

.form-item > .flex {
  gap: 0 1ch;
  align-items: flex-start;
  flex-wrap: wrap;
}
.form-item > .flex .form-item-caption {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: all 250ms !important;
  overflow: hidden;
}
.form-item > .flex .form-item-caption .inside {
  min-height: 0;
}
.form-item > .flex .form-item-caption[data-state=expanded] {
  grid-template-rows: 1fr;
}

.multi-select-field [data-accordion]:not(:first-child) {
  margin-top: var(--gap);
}

.file-field-wrapper {
  --fileButtonSize: 3em;
  border-bottom: 1px solid var(--colorGray);
  padding-bottom: var(--gap);
  max-width: 50ch;
}

.file-upload-wrapper {
  grid-template-columns: 1fr;
  position: relative;
  min-height: calc(3 * var(--gap) + 1em - 2px);
  align-items: center;
}
.file-upload-wrapper:hover button {
  background-color: var(--colorShade);
}
.file-upload-wrapper input[type=file] {
  width: auto;
  color: transparent;
  outline: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  border: none;
  opacity: 0;
}
.file-upload-wrapper {
  isolation: isolate;
  display: flex;
  align-items: center;
}
.file-upload-wrapper > * {
  position: absolute;
  display: flex;
  align-items: center;
}
.file-upload-wrapper > label {
  inset: 0 0 0 calc(var(--fileButtonSize) + var(--gap));
  padding-inline-end: calc(var(--gap) / 2);
  padding-block: calc(var(--gap) / 2);
  cursor: pointer;
  z-index: 2;
  word-break: break-all;
  max-width: calc(100% - (var(--fileButtonSize) + var(--gap)));
  user-select: none;
  display: flex;
  gap: 0 0.5ch;
  flex-wrap: wrap;
  align-content: center;
  font-weight: 700;
  color: var(--colorGray);
}
.file-upload-wrapper > label span {
  font-size: 90%;
  font-weight: 400;
}
.file-upload-wrapper.has-file label {
  font-weight: 400;
  color: var(--black);
}
.file-upload-wrapper > input[type=file] {
  position: absolute;
  inset: 0 0 0 0;
  max-width: 100%;
  z-index: 1;
}
.file-upload-wrapper > button {
  z-index: 0;
  inset: auto calc(100% - var(--fileButtonSize)) auto 0;
  width: 3em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--colorAccent);
  color: var(--colorBackground);
  display: grid;
  place-items: center;
  place-content: center;
  transition: background-color var(--transitionDuration) var(--transitionEasing);
}
.file-upload-wrapper > button span {
  font-size: 3em;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  margin-top: -0.05em;
  pointer-events: none;
  height: 1em;
}
.file-upload-wrapper.has-file button {
  z-index: 10;
}
.file-upload-wrapper.has-file button {
  transform: rotate(-45deg);
}

.error-message {
  padding: 0 0 0 calc((var(--fileButtonSize) + var(--gap)) * 1.125);
  margin-top: calc(var(--gap) / 3);
  color: #ff0000;
  display: none;
}

[data-validator=false] + .error-message,
.invalid-comparison + .error-message {
  display: block;
}

[data-validator=false] > *:where(:not(button)),
.invalid-comparison > *:where(:not(button)) {
  color: #ff0000 !important;
}

[data-validator=false] > button,
.invalid-comparison > button {
  background-color: #ff0000;
}

.show-description {
  display: grid;
  place-items: center;
  opacity: 0.5;
  cursor: pointer;
  margin-block: 0.2em 0;
  margin-left: auto;
}
.show-description > span {
  font-size: 90%;
  line-height: 1;
  display: block;
  text-align: center;
  width: calc(var(--gap) * 1.2);
  height: calc(var(--gap) * 1.2);
  border: 1px solid var(--black);
  border-radius: 50%;
}
.show-description > span > span {
  top: 0.1em;
  position: relative;
}
button + .show-description > span {
  margin-block: 0.5em;
}
.show-description:hover {
  opacity: 1;
}
.show-description:hover span {
  color: var(--colorShade);
  border-color: var(--colorShade);
}
.show-description + [data-state=expanded]:not(.overlay-wrapper) {
  margin-top: calc(var(--gap) / 3);
}

.default-description {
  margin-top: calc(var(--gap) / 3);
}

.description-wrapper .show-description {
  margin-left: 0;
}

.form-content .required {
  margin-bottom: var(--gap);
}

.form-validation-input + .validation-item {
  margin-top: var(--gap);
}

.field-comparison-wrapper input:invalid, .field-comparison-wrapper input.invalid-comparison {
  color: #ff0000;
  border-color: #ff0000;
}

.form-toggle-button {
  gap: var(--gap);
  align-items: center;
  align-content: center;
  display: flex;
}
fieldset.has-set-values + .form-toggle-button:not(:has(+ fieldset:not([data-state=expanded]))) {
  display: none;
}
.form-toggle-button:not(.inverted) > span:first-child {
  width: 3em;
  height: 3em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--black);
  display: grid;
  place-items: center;
  place-content: center;
}
.form-toggle-button:not(.inverted) > span:first-child span {
  color: var(--colorBackground);
  font-size: 3em;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  margin-top: -0.07em;
  pointer-events: none;
  height: 1em;
}
.form-toggle-button.inverted > span:first-child {
  width: calc(var(--iconSizeLarge) * 1.2);
  height: calc(var(--iconSizeLarge) * 1.2);
  min-width: calc(var(--iconSizeLarge) * 1.2);
  min-height: calc(var(--iconSizeLarge) * 1.2);
  font-size: 1.125em;
  max-width: calc(var(--maxTextLengthSmall) / 1.125);
  border: var(--borderWidth) var(--borderStyle) var(--colorBorderLight);
  border-radius: 0.44em;
  position: relative;
}
.form-toggle-button.inverted[aria-expanded=true] > span:first-child {
  border-color: var(--black);
}
.form-toggle-button.inverted[aria-expanded=true] > span:first-child::after {
  content: "";
  width: calc(var(--iconSizeSmall) / 2);
  height: calc(var(--iconSizeSmall) / 1.2);
  border-right: 4px solid var(--black);
  border-bottom: 4px solid var(--black);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  margin-top: -0.1em;
}
.form-toggle-button.inverted[aria-expanded=true] > span:last-child {
  color: var(--black);
}

fieldset .label {
  font-size: 1.125em;
  font-weight: 600;
}

.form-control {
  align-items: flex-start;
}

.form-item label a {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-decoration-color: var(--black);
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
  transition: color 100ms linear;
}

main form fieldset[data-observe-wrapper=incomplete] .form-item :where(input, textarea, select):not([data-observe=complete]) {
  border-color: red !important;
}

main form fieldset .wrong-size + .error-message {
  display: grid !important;
}

/* calculation */
.text-wrapper + .result-wrapper {
  margin-top: calc(2 * var(--gap));
}

.result-wrapper {
  background-color: #F3F1EE;
  border-radius: 0.5em;
  padding: calc(var(--gap) * 1.5) calc(var(--gap) * 3);
}
.result-wrapper .title, .result-wrapper .headline {
  padding-inline: calc(var(--gap) * 1.5 / 1.2);
}
.result-wrapper .headline {
  padding-inline: calc(var(--gap) * 1.5 / 1.2 / 1.28);
  padding-block: calc(var(--gap) / 2);
}
.result-wrapper dl {
  display: grid;
  padding: calc(var(--gap) / 3 * 2) calc(var(--gap) * 2.5) calc(var(--gap) / 3 * 2) calc(var(--gap) * 1.5);
  position: relative;
  isolation: isolate;
}
.result-wrapper dl::after {
  position: absolute;
  top: 1.3em;
  right: 0;
  content: "";
  width: 2em;
  height: 2em;
  border-radius: 50%;
  z-index: -1;
}
.result-wrapper dl[data-state=valid]::before {
  content: "";
  width: calc(var(--iconSizeSmall) / 2 * 1.2);
  height: calc(var(--iconSizeSmall) / 1.2 * 1.2);
  border-right: 3px solid var(--colorBackground);
  border-bottom: 3px solid var(--colorBackground);
  position: absolute;
  top: 2.15em;
  right: 0.4em;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  z-index: 0;
  color: var(--colorBackground);
}
.result-wrapper dl[data-state=invalid]:not(.no-icon)::before, .result-wrapper dl[data-state=invalid]:not(.no-icon) dt::before {
  content: "";
  position: absolute;
  top: 3rem;
  right: -0.25rem;
  width: 1.6rem;
  height: 3px;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  z-index: 2;
  background-color: var(--colorBackground);
}
.result-wrapper dl[data-state=invalid]:not(.no-icon) dt::before {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
.result-wrapper dl[data-state=valid]::after {
  background-color: #61BC3D;
}
.result-wrapper dl[data-state=invalid]:not(.no-icon)::after {
  background-color: red;
}
.result-wrapper dl:not(:last-child) {
  border-bottom: 1px solid var(--colorBorderLight);
}
.result-wrapper dl[data-state=invalid] dd * {
  color: red;
}
.result-wrapper dl dt {
  font-size: 0.8em;
}
.result-wrapper dl:where([data-state=valid], [data-state=invalid]) dt {
  padding-right: 2em;
}
.result-wrapper dl[data-state=invalid] .warning {
  display: block;
}
.result-wrapper dd {
  display: grid;
  gap: calc(var(--gap) / 3);
}
.result-wrapper dd p {
  padding: 0;
  font-size: 0.8em;
  line-height: 1.5;
}
.result-wrapper dd p.warning {
  display: none;
}
.result-wrapper dd p:first-child {
  font-weight: 600;
  font-size: 1em;
}

.description-wrapper {
  margin-top: calc(3 * var(--gap));
  gap: var(--gap);
  align-items: center !important;
}
.description-wrapper + .description-wrapper {
  margin-top: var(--gap);
}
.result-wrapper + .description-wrapper {
  margin-top: calc(2 * var(--gap));
}
.description-wrapper .show-description {
  font-size: 2em;
  opacity: 1;
  margin-block: 0;
}
.description-wrapper .show-description span:first-child {
  border-width: 3px;
  border-color: var(--colorAccent);
}
.description-wrapper .show-description span:first-child span {
  top: -0.3em;
  position: relative;
  color: var(--colorAccent);
}
.description-wrapper .overlay-wrapper {
  position: fixed;
  left: 0;
  width: 100%;
  opacity: 0;
}
.description-wrapper .overlay-wrapper[data-state=expanded] {
  top: 0;
  height: calc(100vh + 1em);
  height: calc(100dvh + 1em);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: grid;
  place-items: center;
  place-content: center;
  isolation: isolate;
  opacity: 1;
}
.description-wrapper .overlay-wrapper[data-state=expanded] > .close-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: -1;
}
.description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content {
  position: relative;
  width: calc(100% - (10% + 2 * var(--gap)));
  max-width: 60ch;
  padding: calc(3 * var(--gap));
  background-color: var(--colorBackground);
  border-radius: 5px;
}
.description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content p:not(:first-child) {
  padding-top: var(--baseLineHeight);
}
.description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content .close-overlay {
  position: absolute;
  top: 1em;
  right: 1em;
  border: 3px solid var(--colorAccent);
  display: block;
  text-align: center;
  width: calc(var(--gap) * 2.4);
  height: calc(var(--gap) * 2.4);
  border-radius: 50%;
  cursor: pointer;
}
.description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content .close-overlay::after, .description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content .close-overlay::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
  width: 60%;
  height: 3px;
  background-color: var(--colorAccent);
}
.description-wrapper .overlay-wrapper[data-state=expanded] .overlay-content .close-overlay::before {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}

.content-template .description-wrapper {
  margin-top: var(--gap);
}

.form-content .text.error {
  padding-bottom: calc(2 * var(--gap));
  color: #ff0000;
}

@media screen and (max-width: 650px) {
  .registration-template main menu li .anchor-item span:first-child,
.calculation-template main menu li .anchor-item span:first-child,
.success-template main menu li .anchor-item span:first-child,
.closed-template main menu li .anchor-item span:first-child,
.registration-template main menu li .anchor-item-link span:first-child,
.calculation-template main menu li .anchor-item-link span:first-child,
.success-template main menu li .anchor-item-link span:first-child,
.closed-template main menu li .anchor-item-link span:first-child {
    margin-inline-end: 1vw;
  }
  .registration-template main menu li .anchor-item span:last-child,
.calculation-template main menu li .anchor-item span:last-child,
.success-template main menu li .anchor-item span:last-child,
.closed-template main menu li .anchor-item span:last-child,
.registration-template main menu li .anchor-item-link span:last-child,
.calculation-template main menu li .anchor-item-link span:last-child,
.success-template main menu li .anchor-item-link span:last-child,
.closed-template main menu li .anchor-item-link span:last-child {
    left: calc(7 * (3 * var(--gap) + 1vw) + 2 * var(--gap));
  }
}
fieldset [data-accordion-content] .inside {
  position: relative;
}
fieldset [data-accordion-content] .inside button.reset-fieldset {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(2 * var(--gap));
  height: calc(2 * var(--gap));
  min-width: calc(2 * var(--gap));
  min-height: calc(2 * var(--gap));
  border: 2px solid var(--black);
  border-radius: 50%;
}
fieldset [data-accordion-content] .inside button.reset-fieldset::before, fieldset [data-accordion-content] .inside button.reset-fieldset::after {
  content: "";
  width: 1.2em;
  height: 3px;
  background: var(--black);
  transform-origin: center;
  position: absolute;
  top: 50%;
  left: 50%;
}
fieldset [data-accordion-content] .inside button.reset-fieldset::before {
  transform: translateY(-50%) translateX(-50%) rotate(-45deg);
}
fieldset [data-accordion-content] .inside button.reset-fieldset::after {
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
}

.form-item select.all-values {
  pointer-events: none;
  user-select: none;
  display: none;
}

.form-edit-icon-wrapper:has([data-observe=complete])::before, .form-edit-icon-wrapper:focus-within::before {
  background-color: var(--black);
}

.form-wrapper .error {
  color: red;
  margin: var(--gap) 0;
}

@media screen and (max-width: 1024px) {
  html {
    scroll-padding-top: 14em;
  }
}
@media screen and (max-width: 500px) {
  .registration-template main menu.flex,
.calculation-template main menu.flex,
.success-template main menu.flex,
.closed-template main menu.flex {
    justify-content: space-between;
  }
  .registration-template main menu.flex li:last-child,
.calculation-template main menu.flex li:last-child,
.success-template main menu.flex li:last-child,
.closed-template main menu.flex li:last-child {
    margin-right: 5%;
  }
  .registration-template main menu.flex li .anchor-item::after, .registration-template main menu.flex li .anchor-item-link::after,
.calculation-template main menu.flex li .anchor-item::after,
.calculation-template main menu.flex li .anchor-item-link::after,
.success-template main menu.flex li .anchor-item::after,
.success-template main menu.flex li .anchor-item-link::after,
.closed-template main menu.flex li .anchor-item::after,
.closed-template main menu.flex li .anchor-item-link::after {
    width: 11vw;
  }
  .registration-template main menu.flex li .anchor-item span:last-child, .registration-template main menu.flex li .anchor-item-link span:last-child,
.calculation-template main menu.flex li .anchor-item span:last-child,
.calculation-template main menu.flex li .anchor-item-link span:last-child,
.success-template main menu.flex li .anchor-item span:last-child,
.success-template main menu.flex li .anchor-item-link span:last-child,
.closed-template main menu.flex li .anchor-item span:last-child,
.closed-template main menu.flex li .anchor-item-link span:last-child {
    display: none;
  }
}
fieldset[data-observe-wrapper]:not([data-state]) + button.form-toggle-button {
  display: none !important;
}

button.replace-file {
  width: 3em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--colorAccent);
  color: var(--colorBackground);
  display: grid;
  place-items: center;
  place-content: center;
  transition: background-color var(--transitionDuration) var(--transitionEasing);
  transform: rotate(-45deg);
  z-index: 10;
}
button.replace-file > span {
  font-size: 3em;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  margin-top: -0.05em;
  pointer-events: none;
  height: 1em;
}

[data-replaced] {
  display: none !important;
}
[data-replaced] + [data-replace-item] {
  display: grid;
}

.replace-item-wrapper {
  display: grid;
  grid-template-columns: calc((var(--fileButtonSize) + var(--gap)) * 1.125) auto;
  align-items: center;
  margin-block: 0.45em 0.47em;
}
.replace-item-wrapper.has-image-file {
  align-items: start;
}
.replace-item-wrapper.has-image-file img {
  width: auto;
  max-height: 11em;
}
.replace-item-wrapper a {
  font-size: 1.125em;
  font-weight: 700;
  color: var(--colorGray);
  word-break: break-all;
}

[data-replace-item] {
  display: none;
}

@media screen and (max-width: 1024px) {
  .closed-template .content-wrapper .form-content .text-wrapper .title:first-child {
    margin-top: 5em;
  }
}
.closed-template .content-wrapper .status-wrapper {
  display: none !important;
}

.home-template {
  background-color: var(--yellow);
  background: linear-gradient(to right, var(--yellow), var(--yellow) 50%, var(--colorBackground) 50.05%);
}
@media screen and (max-width: 1024px) {
  .home-template {
    background-color: var(--yellow);
    background-image: none;
  }
}
.home-template address, .home-template .form-wrapper, .home-template .form-wrapper .gap {
  gap: var(--gap);
}
.home-template .logo {
  font-size: 2.625em;
}
.home-template .page-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}
.home-template main {
  grid-template-columns: 1fr 1fr;
}
.home-template main .text-wrapper {
  --colorButton: #384FAB;
  grid-column: 1;
  grid-row: 1;
  padding-block: calc(3 * var(--gap)) calc(3 * var(--gap));
  padding-inline: 20% 8%;
  align-content: stretch;
  align-items: start;
}
@media screen and (max-width: 1024px) {
  .home-template main .text-wrapper {
    display: flex;
    flex-direction: column;
    padding-inline: 5%;
    min-height: 60vh;
    min-height: 60dvh;
  }
}
@media screen and (max-width: 1440px) {
  .home-template main .text-wrapper {
    padding-inline-start: 10%;
  }
}
@media screen and (max-width: 1024px) {
  .home-template main .text-wrapper {
    padding-inline-start: 5%;
  }
}
.home-template main .text-wrapper > * {
  align-self: start;
}
.home-template main .text-wrapper > *:first-child {
  margin-block-start: max(5em, 18vh);
}
.home-template main .image-wrapper {
  grid-column: 2;
  grid-row: 1;
  isolation: isolate;
}
@media screen and (max-width: 1024px) {
  .home-template main .image-wrapper {
    padding-block: calc(2 * var(--gap));
  }
}
.home-template main .image-wrapper .image {
  grid-column: 1;
  grid-row: 1/span 2;
  position: relative;
  z-index: -1;
}
@media screen and (min-width: 1025px) {
  .home-template main .image-wrapper .image {
    overflow: hidden;
  }
}
.home-template main .image-wrapper .image[data-image-style=background] img {
  width: 100%;
  height: calc(100% + 2 * var(--gap));
  object-fit: cover;
  object-position: center;
  margin-top: calc(2 * var(--gap) * -1);
  position: relative;
}
.home-template main .image-wrapper .image[data-image-style=background] img:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .home-template main .image-wrapper .image[data-image-style=background] img {
    position: absolute;
    inset: 0;
    height: calc(100% + 4 * var(--gap));
  }
}
.home-template main .image-wrapper .image#image-fader img:nth-child(1) {
  z-index: 3;
  animation: fader 1800ms 3500ms ease-in-out;
}
.home-template main .image-wrapper .image#image-fader img:nth-child(2) {
  z-index: 2;
}
.home-template main .image-wrapper .image#image-fader img:nth-child(3) {
  opacity: 0;
}
@media screen and (max-width: 1024px) {
  .home-template main .image-wrapper .image#image-fader img:nth-child(1) {
    animation: faderMobile 1800ms 3500ms ease-in-out;
  }
}
@keyframes fader {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.2;
  }
}
@keyframes faderMobile {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.home-template main .image-wrapper input[type=text] {
  min-width: min(25vw, 23ch);
}
.home-template main .image-wrapper button {
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .home-template main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-row: 1/span 2;
    align-content: start;
  }
  .home-template main .image-wrapper {
    grid-column: 1;
    grid-row: 2;
    min-height: max(50vh, 30em);
  }
}
.home-template .form-wrapper {
  grid-column: 1;
  grid-row: 1/span 2;
  justify-self: end;
  align-self: start;
  width: auto;
  max-width: 23.125em;
  margin-inline: 8% 20%;
  margin-block: calc(max(10em, 18vh) + 3 * var(--gap)) calc(15 * var(--gap));
  padding: calc(2 * var(--gap)) calc(2.5 * var(--gap));
  background-color: var(--colorBackground);
  border-radius: var(--borderRadius);
}
@media screen and (max-width: 1024px) {
  .home-template .form-wrapper {
    margin-block: calc(8% - 2 * var(--gap));
    margin-inline: 8%;
  }
}
.home-template address {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  z-index: 2;
  margin-block-start: auto;
  padding-block-start: calc(6 * var(--gap));
}
@media screen and (max-width: 1024px) {
  .home-template address {
    grid-column: 1/span 2;
    margin-block-start: auto;
  }
}
.home-template address > * {
  align-self: start;
}
.home-template address p {
  font-size: 0.75em;
  line-height: 1.46;
}
.home-template address img {
  max-width: 9em;
}
@media screen and (min-height: 800px) {
  .home-template .header-wrapper {
    position: sticky;
    top: 0;
  }
}
.home-template .header-wrapper .login {
  order: 3;
}

.home-template.edit-mode .image > :nth-child(1) {
  margin-top: 11em !important;
}

.home-template.edit-mode .image > :nth-child(2) {
  margin-bottom: -17.1em !important;
}

.home-template.landingpage-template {
  background-color: var(--yellow);
  background-image: none;
  --inlineSpace: min(clamp(1.5em, 3vw + 1em, 3.5em),56px);
}
@media screen and (max-width: 1024px) {
  .home-template.landingpage-template {
    --inlineSpace: 4%;
  }
}

.home-template.landingpage-template main {
  grid-template-columns: 1fr;
}

@media screen and (max-width: 1400px) {
  .landingpage-template .logo {
    margin-top: -1px;
  }
}
.landingpage-template .logo svg {
  width: 227px;
  fill: var(--blueNew);
}
@media screen and (max-width: 768px) {
  .landingpage-template .logo svg {
    width: 150px;
    margin-top: 0.2em;
  }
}
.landingpage-template h1.headline {
  color: var(--blueNew);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.36408978rem);
  max-width: 18ch;
  margin-block-start: 148px !important;
  font-weight: 500;
  line-height: 1.3;
}
.landingpage-template .header-wrapper {
  gap: calc(2 * var(--gap));
  padding-inline: var(--inlineSpace);
  padding-top: 1.47em;
}
@media screen and (max-width: 600px) {
  .landingpage-template .header-wrapper {
    gap: var(--gap);
  }
}
.landingpage-template .header-wrapper a {
  background-color: var(--yellow);
  color: var(--blueNew);
  border: none;
  margin-inline: 0;
  padding-inline: 0;
}
.landingpage-template .header-wrapper nav a {
  padding-block: 0.47em;
}
.landingpage-template .header-wrapper .language-wrapper a {
  width: 3ch;
  text-decoration: underline;
  padding-block: 0.47em;
  height: auto;
}
.landingpage-template .header-wrapper [aria-expanded=true] + a {
  text-decoration: none;
}
.landingpage-template .page-wrapper {
  grid-template-columns: 1fr;
}
@media screen and (max-width: 1024px) {
  .landingpage-template main {
    grid-template-rows: 1fr;
  }
}
.landingpage-template main .text-wrapper {
  width: 100%;
  max-width: calc(1200px + 2 * var(--inlineSpace));
  margin-inline: auto;
  padding-inline: var(--inlineSpace);
  padding-block: 0 calc(3 * var(--gap));
}
.landingpage-template #login-form.form-wrapper {
  margin: 2em 0 0 0;
  animation: none !important;
  font-size: 100%;
}
.landingpage-template #login-form.form-wrapper .button {
  width: 100%;
  text-align: center;
}
.landingpage-template address {
  padding-inline: var(--inlineSpace);
  padding-bottom: 2em;
  color: var(--blueNew);
}
@media screen and (min-width: 768px) {
  .landingpage-template address {
    display: flex;
    align-items: end;
    gap: 2em;
  }
}
.landingpage-template address > a {
  margin-block: 0.6em 0;
}
.landingpage-template address img {
  max-width: 14em;
}
.landingpage-template address p {
  max-width: 41ch;
  font-size: 110%;
}
.landingpage-template .button[type=submit], .landingpage-template .button:not([href]) {
  background-color: var(--blueNew);
  border-color: var(--blueNew);
}
.landingpage-template address {
  padding-block-start: 0;
}
.landingpage-template #login-form.logged-in {
  gap: 0;
  max-width: calc(100vw - 2 * var(--inlineSpace));
}
.landingpage-template #login-form.logged-in div {
  padding-top: 0;
  margin-top: var(--gap);
}
.landingpage-template #login-form.logged-in > a {
  margin-top: var(--gap);
  background-color: var(--blueNew);
  border-color: var(--blueNew);
  font-size: 1.125em;
  padding: calc(var(--buttonSpaceUnit) / 2 + 0.2em) calc(var(--buttonSpaceUnit) * 1.5) calc(var(--buttonSpaceUnit) / 2 + 0.2em) calc(var(--buttonSpaceUnit) * 1.5);
}
.landingpage-template #login-form.logged-in > a:hover {
  background-color: var(--blueNewHover);
  border-color: var(--blueNewHover);
}

#login-form button.button:hover,
#login-form button.button:focus-visible,
html:not(.landingpage-template) .language-wrapper[data-toggle-state=closed] button:hover + a,
html:not(.landingpage-template) .language-wrapper[data-toggle-state=closed] button:focus-visible + a,
html:not(.landingpage-template) .button:where([data-button-type=background])[aria-expanded=true],
html:not(.landingpage-template) .button:where([data-button-type=background]):hover,
html:not(.landingpage-template) .button:where([data-button-type=background]):focus-visible,
html:not(.landingpage-template) .button:where([data-button-type=background])[data-state=selected]:hover,
html:not(.landingpage-template) .button[type=submit]:hover, .button:not([href]):hover {
  background-color: var(--blueNewHover);
  border-color: var(--blueNewHover);
}

.landingpage-template .header-wrapper .language-wrapper [aria-expanded=false]:hover + a,
.landingpage-template .header-wrapper .language-wrapper [aria-expanded=true] + a + a + a + a,
.landingpage-template .header-wrapper .language-wrapper [aria-expanded=true] + a + a + a,
.landingpage-template .header-wrapper .language-wrapper [aria-expanded=true] + a + a,
.landingpage-template .header-wrapper .language-wrapper [aria-expanded=true] + a {
  --colorShade: var(--yellow) ;
}

.landingpage-template .header-wrapper .language-wrapper a:hover,
.landingpage-template .header-wrapper .language-wrapper button:hover + a {
  color: var(--black);
}

html:not(.landingpage-template) .logo svg {
  width: min(20vw, 227px);
  min-width: 120px;
}

@media screen and (min-width: 800px) {
  .header-wrapper .logo-wrapper p {
    font-size: 110%;
  }
}
.header-wrapper .logo-wrapper {
  gap: calc(var(--gap) * 0.75);
}

/* custom project styles */
html {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 400;
}

#primary-navigation {
  position: fixed;
  inset: 0;
  padding: calc(9 * var(--gap)) 10%;
  background-color: var(--yellow);
  z-index: -1;
}

#receipt-wrapper {
  opacity: 0;
  transition: none;
}
.no-print #receipt-wrapper {
  opacity: 1;
  transition: opacity 0.25s linear;
}

#receipt {
  line-height: 150%;
  margin-left: 0.6cm !important;
  width: 18cm !important;
  margin-right: -18cm !important;
}
html:not(.no-print) #receipt :is(p, span.bold.line, time) {
  font-size: 13px !important;
  line-height: 22px !important;
}
#receipt header {
  background-color: rgb(236, 237, 237);
  display: flex;
  justify-content: space-between;
  padding: 1.6em;
  gap: 1.6em;
  margin-bottom: 2em;
  flex-wrap: wrap;
}
#receipt header > * {
  flex-basis: max-content;
}
#receipt header div.h1 {
  font-size: 100%;
  display: grid;
}
#receipt header div.h1 svg {
  width: 163px;
  height: 36px;
  display: block;
}
#receipt header div.h1 p {
  font-size: 100%;
  margin-top: auto;
}
#receipt .row {
  display: flex;
  border-bottom: 1px solid #000;
  padding-block: 0.6em 2lh;
  flex-wrap: wrap;
}
#receipt .row.gap {
  gap: 1.6em;
  align-items: baseline;
}
#receipt .row.gap.gap-large {
  gap: max(1.6em, 5vw);
}
#receipt .row.space-between {
  justify-content: space-between;
  padding-bottom: 0.6em;
}
#receipt .row:not(.gap) > div:not(.table) > * {
  padding-right: 1.6em;
}
#receipt .row h2 {
  font-size: 160%;
}
#receipt .line {
  border-bottom: 1px solid #000;
  display: block;
}
#receipt .bold {
  font-weight: 600;
}
#receipt .bold.line {
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
}
#receipt .bold.line:not([class*=start-]) {
  padding-top: 0.6em;
}
#receipt .grid-columns {
  display: grid;
}
html:not(.no-print) #receipt .grid-columns {
  grid-template-columns: minmax(10em, 70%) auto !important;
}
@media screen and (min-width: 40em) {
  html.no-print #receipt .grid-columns {
    grid-template-columns: minmax(10em, 70%) auto;
  }
}
#receipt .table p {
  display: grid;
  grid-template-columns: auto auto 1fr;
  min-width: max-content;
}
#receipt .table p .bold.line + .bold.line {
  grid-column: 2/span 2;
}
#receipt .table p .start-1 {
  grid-column-start: 1;
  justify-self: end;
  padding-right: 1.6em;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
}
#receipt .table p .start-2 {
  grid-column-start: 2;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
}
#receipt .table p .start-3 {
  grid-column-start: 3;
  justify-self: stretch;
  text-align: right;
  padding-bottom: 0.6em;
  margin-bottom: 0.6em;
  font-variant-numeric: tabular-nums;
}
#receipt .table p .space-bottom {
  padding-bottom: 3lh;
}
#receipt .skip-large-text {
  display: block;
}
@media screen and (min-width: 40em) {
  .no-print #receipt .skip-large-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 1.6em;
  }
}
#receipt .text.small {
  font-size: 13px;
  display: flex;
  gap: 0.5ch;
  margin-block: 1.6em 3lh;
  hyphens: auto;
}
html:not(.no-print) #receipt .text.small > :is(p, span) {
  font-size: 10px !important;
  hyphens: none !important;
  line-height: 15px !important;
  margin-top: 3.2em !important;
}
#receipt .justify-end {
  justify-self: stretch;
}

.footer-text {
  line-height: 150%;
}

.receipt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1ch;
  justify-content: center;
  margin-top: 5lh;
  position: sticky;
  bottom: 2em;
}

@media print {
  /* All your print styles go here */
  html {
    background-image: none;
  }
  header.header-wrapper,
.receipt-buttons,
#a11y-main-content > .flex.flex-vertical:first-child {
    display: none !important;
  }
  #receipt {
    width: 17cm;
    margin-left: 1cm;
  }
  .content-wrapper {
    margin: 0 !important;
  }
  #receipt header {
    padding: 0 0 2lh 0;
  }
  #receipt .grid-columns {
    grid-template-columns: 11cm 6cm;
  }
  #receipt .skip-large-text {
    padding-right: 1.6em;
  }
  #receipt .text.small {
    margin-top: 3.2em !important;
  }
  #receipt .text.small :is(p, span) {
    font-size: 10px !important;
    hyphens: none !important;
  }
  #receipt > header {
    background-color: #fff;
  }
  :is(p, span.bold.line, time) {
    font-size: 13px !important;
    line-height: 22px !important;
  }
  :is(h1, h2) {
    font-size: 24px !important;
    line-height: 26px !important;
  }
}
.no-print #receipt {
  width: auto !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

html:not(.no-print) :is(h1, h2) {
  font-size: 24px !important;
  line-height: 26px !important;
}

/*# sourceMappingURL=main.css.map */