.fee-calculator {
  /* Figma-Tokens, die es als Seiten-Variable gibt, werden von dort bezogen. */
  --fc-primary: var(--color-primary, #00a2d4);
  --fc-text: var(--color-text, #333333);
  --fc-headline: var(--color-headline, #343434);
  --fc-white: var(--color-white, #ffffff);
  --fc-border: var(--color-medium-grey, #aaaaaa);

  /* Semantische Tokens ohne Entsprechung im Seiten-Theme. */
  --fc-info: #0e67a1;
  --fc-info-tint: #d3efff;
  --fc-positive: #45881f;
  --fc-sheet-bg: #ebebeb;
  --fc-sheet-headline: #30302f;
  --fc-sheet-body: #3e3e3d;

  box-sizing: border-box;
  margin: 1.5rem auto;
  padding: 3rem 0;
  color: var(--fc-text);
  /* Basisgröße wie der Seiten-Body (Root ist 62.5%, d. h. 1rem = 10px). */
  font-size: 1.6rem;
  line-height: 1.4;
}

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

.fee-calculator .is-hidden {
  display: none;
}

/* ---------- Layout ---------- */
.fc-layout {
  display: grid;
  grid-template-columns: 1fr;
  /* Gestapelt trägt die Ergebnisspalte den Abstand über ihr eigenes Padding. */
  gap: 0;
}

@media (min-width: 768px) {
  .fc-layout {
    /* Spaltenverhältnis aus dem Design: 666 px Formular : 358 px Marginalspalte. */
    grid-template-columns: minmax(0, 666fr) minmax(0, 358fr);
    gap: 5.6rem;
    align-items: start;
  }
}

.fc-form {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* ---------- Kopfbereich ---------- */
.fc-intro {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.fc-title {
  margin: 0;
  font-size: var(--h1-font-size, 2.6rem);
  font-weight: 700;
  line-height: 3.3rem;
  color: var(--fc-headline);
}
.fc-subtitle {
  margin: 0;
}

/* ---------- Abschnitte ---------- */
.fc-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.fc-section__title {
  margin: 0;
  font-size: var(--h2-font-size, 2.3rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 3.3rem;
  color: var(--fc-primary);
}
.fc-section__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.fc-field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fc-field__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  color: var(--fc-headline);
}
.fc-note {
  margin: 0;
}

/* ---------- Checkboxen und Radiobuttons ---------- */
/* hält das absolut positionierte, versteckte Input bei seinem Label */
.fc-option,
.fc-status__option {
  position: relative;
}

/* natives Input visuell ausblenden, Darstellung übernimmt das Label */
.fc-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.fc-check-label {
  position: relative;
  display: block;
  padding-left: 2.4rem;
  /* die globale label-Regel des Themes setzt 2.5rem, das Design will 1.4 */
  line-height: 1.4;
  cursor: pointer;
}
/* 0.45rem zentriert das 1.4-rem-Feld auf der Versalhöhe der ersten Textzeile */
.fc-check-label::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
}
.fc-check-label::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 0.3rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--fc-text);
  opacity: 0;
  transition: opacity 0.1s ease-in;
}
.fc-check:checked + .fc-check-label::after {
  opacity: 1;
}
.fc-check[type="radio"] + .fc-check-label::before,
.fc-check[type="radio"] + .fc-check-label::after {
  border-radius: 50%;
}
.fc-check:focus-visible + .fc-check-label::before {
  outline: 2px solid var(--fc-primary);
  outline-offset: 1px;
}
.fc-check-label--bold {
  font-weight: 700;
}
.fc-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- Status ---------- */
.fc-status {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .fc-status {
    flex-direction: row;
  }
}
.fc-status__option {
  flex: 1 0 0;
  min-width: 0;
  padding: 2rem;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  transition: border-color 0.15s, background-color 0.15s;
}
.fc-status__option.is-active {
  background: var(--fc-info-tint);
  border-color: var(--fc-info);
}
.fc-status__option.is-active .fc-check-label {
  font-weight: 700;
}

/* ---------- Cluster ---------- */
.fc-clusters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .fc-clusters {
    grid-template-columns: 1fr 1fr;
  }
}
.fc-cluster {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--fc-white);
  border: 1px solid var(--fc-border);
  transition: border-color 0.15s, background-color 0.15s;
}
.fc-cluster.is-active {
  background: var(--fc-info-tint);
  border-color: var(--fc-info);
}
.fc-cluster__name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  color: var(--fc-headline);
}

/* ---------- Ergebnisspalte ---------- */
.fc-result {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 2rem 0;
}
.fc-result__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.fc-result-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.fc-result-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2rem;
}
.fc-result-title {
  margin: 0;
  font-size: var(--h2-font-size, 2.3rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 2.7rem;
  color: var(--fc-primary);
}
.fc-result-sub {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.95rem;
  color: var(--fc-sheet-body);
}

/* ---------- Kostenblatt ---------- */
.fc-sheet {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0;
  background: var(--fc-sheet-bg);
  border: 1px solid var(--fc-border);
}
.fc-sheet__group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 2rem;
}
.fc-sheet__group-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  color: var(--fc-sheet-headline);
}
.fc-sheet__empty {
  margin: 0;
  line-height: 2.4rem;
  color: var(--fc-sheet-body);
}
.fc-position {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.fc-position:not(:last-child) {
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--fc-border);
}
.fc-position__label {
  flex: 1 0 0;
  min-width: 0;
  line-height: 2.4rem;
  color: var(--fc-sheet-headline);
}
.fc-position__amount {
  display: inline-flex;
  gap: 0.4rem;
  align-items: flex-start;
  white-space: nowrap;
  line-height: 2.4rem;
  color: var(--fc-sheet-headline);
}
.fc-position__amount--incl {
  color: var(--fc-positive);
}
.fc-position__amount--incl::after {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.4rem;
  /* icon-solid/validation-success (Figma) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2345881f'/%3E%3Cpath d='M1 3.82353L3.5098 6.33333L8.55556 1' transform='translate(3.444 4.333)' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 1.6rem 1.6rem no-repeat;
}
.fc-sheet__total {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 2rem 2rem 0;
  border-top: 1px dashed var(--fc-border);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.7rem;
  color: var(--fc-sheet-headline);
}
.fc-sheet__total > span:first-child {
  flex: 1 0 0;
  min-width: 0;
}
.fc-result-footer {
  margin: 0;
  padding: 0 2rem;
  font-size: 1.3rem;
  line-height: 1.95rem;
  color: var(--fc-sheet-body);
}

/* ---------- Tipps ---------- */
.fc-tips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--fc-info-tint);
  border: 1px solid var(--fc-info);
}
.fc-tip {
  margin: 0;
  line-height: 2.4rem;
  color: var(--fc-sheet-headline);
}

/* ---------- Zurücksetzen ---------- */
.fc-reset {
  width: 100%;
  min-width: 13rem;
  min-height: 4.8rem;
  padding: 1.2rem 2rem;
  background: transparent;
  border: 1px solid #000000;
  border-radius: 8px;
  color: var(--fc-sheet-headline);
  font: inherit;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.036em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s;
}
.fc-reset:hover {
  background: var(--fc-sheet-bg);
}