/* WIA Pflegegradrechner */
/* assets/styles/components/cards._utils */
/* mixins.numbers */
form[name=calculator] {
  max-width: 100ch;
  margin: 0 auto;
}

form[name=calculator] p {
  max-width: 50em !important;
}

.modul-wrapper,
.calculator-results {
  border-top: 1px dotted var(--color-6);
}

.modul-wrapper {
  /* in Schritt 5 ist das Grid anders */
  --column-layout: 1fr;
  gap: 0 1rem;
}

.modul-label,
.modul-input {
  grid-column: -1/1;
}

.modul-input[type=number] {
  width: calc(2em + 6ch);
}

.modul-wrapper .btn-step {
  grid-column: 1/-1;
}

@media (min-width: 36em) {
  .modul-wrapper .next-step {
    grid-column: 2;
    justify-self: end;
  }
  .modul-wrapper .next-step {
    grid-column: 2;
    justify-self: end;
  }
  .modul-wrapper .next-step[data-step="6"] {
    grid-column: 3;
  }
  .modul-wrapper .prev-step {
    grid-column: 1;
    justify-self: start;
  }
}
@media (min-width: 36em) {
  #modul-5 .modul-wrapper {
    --column-layout: 1fr auto 2fr;
  }
  #modul-5 .modul-hint {
    grid-column: 3;
  }
  .modul-wrapper {
    --column-layout: 1fr 2fr;
  }
  .modul-label {
    grid-column: -1/1;
  }
  .modul-input {
    grid-column: 1;
    align-self: start;
  }
  .modul-input[type=number],
  .modul-hint {
    grid-column: 2;
  }
  .modul-input[type=number] {
    margin-bottom: var(--size3);
  }
}
@media (max-width: 35.999em) {
  #modul-5 .modul-wrapper {
    --column-layout: 1fr auto;
  }
  :is(#modul-5 .modul-wrapper) .modul-input {
    grid-column: 1;
    align-self: baseline;
  }
  :is(#modul-5 .modul-wrapper) .modul-input[type=number] {
    grid-column: 2;
  }
  :is(#modul-5 .modul-wrapper) .modul-hint {
    grid-column: 1/-1;
  }
}
.modul-hint {
  --text-len: 1fr;
  align-content: center;
}

.modul-hint > svg {
  --symbol-size: 1.5em;
  --icon-fill: var(--brand-accent-400);
  --icon-stroke: var(--brand-accent-400);
  color: var(--brand-accent-400);
  align-self: start;
  margin-top: 2px;
}

@media (max-width: 63.999em) {
  .modul-hint {
    --widget-areas: "img text";
    grid-template-columns: auto 1fr;
    margin-top: var(--size-2);
    gap: 0.5ch;
  }
  .modul-hint > svg {
    --symbol-size: 1.2em;
    align-self: start;
  }
}
.steps-wrapper {
  outline: 2px solid var(--brand-accent-900);
  border-radius: 22px;
  background-color: var(--brand-accent-900);
  max-width: 50em;
}

#steps .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
}

@media (max-width: 29.999em) {
  #steps .steps {
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  }
}
#steps .step {
  width: auto;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: var(--brand-accent-800-contrast);
}

:is(#steps .step):hover {
  cursor: pointer;
}

#steps [aria-current] {
  background-color: var(--brand-accent-600);
  color: var(--brand-accent-600-contrast);
  outline: 2px solid var(--brand-accent-600);
  animation: fade-in 0.5s ease-in;
}

#steps :nth-last-child(1 of [aria-current]) {
  outline: 2px solid var(--brand-accent-400);
  background-color: var(--brand-accent-400);
  color: var(--color-10);
}

#steps [data-step="1"] {
  border-radius: 22px 0 0 22px;
}

#steps [data-step=result] {
  border-radius: 0 22px 22px 0;
}

.result-title {
  grid-area: head;
}

.result-wrapper {
  --column-layout: 1fr 1fr;
  --row-layout: auto 1fr;
  --area-layout: "head head" "table info";
}
.result-wrapper tfoot {
  background-color: var(--brand-accent-600);
}
.result-wrapper .table-data {
  display: table;
  grid-area: table;
  place-self: center;
  width: 100%;
}
.result-wrapper .table-data > caption {
  caption-side: unset;
}
.result-wrapper .disclaimer {
  grid-area: info;
  align-self: end;
}

.result-products .c_card-deck {
  --card-columns: 1fr;
  --card-rows: auto 1fr;
  --card-layout: "h" "b";
  --body-inset: 0;
}
@media (min-width: 64em) {
  .result-products .c_card-deck {
    --deck-items: 2;
  }
}
.result-products .c_card-deck .card-foot {
  display: none;
}
@media (min-width: 36em) {
  .result-products .c_card-deck .m_card {
    --card-columns: var(--_CLeftRight);
    --card-rows: var(--_RLeftRight);
    --card-layout: "h b";
  }
}
@media (min-width: 64em) {
  .result-products .c_card-deck .m_card {
    --card-columns: var(--_CTopBottom);
    --card-rows: var(--_RTopBottom);
    --card-layout: "h" "b";
  }
}