/* Kalkulator ROI — ROI calculator v2 subpage */
@import url("_shared.css");

.page-subpage--kalkulator-roi .site-header,
.page-subpage--kalkulator-roi .site-header__surface {
  display: none;
}

.page-subpage--kalkulator-roi {
  --page-section-header-inset: 0px;
  --kalkulator-roi-section-padding-top: calc(130px * var(--kalkulator-roi-coord-scale));
}

.page-subpage--kalkulator-roi #section-content {
  margin-top: 0;
  padding-top: var(--kalkulator-roi-section-padding-top);
  padding-bottom: var(--page-section-gap);
  min-height: var(--page-section-min-height);
}

.page-subpage--kalkulator-roi #section-content.page-section--blend-before-scale {
  align-items: start;
}

.page-subpage--kalkulator-roi #section-content > .page-section__scale {
  overflow: visible;
}

.kalkulator-roi-blend-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Control washes unused — rest fill is solid white / 0.2 on the buttons. */
.page-subpage--kalkulator-roi #section-content > .kalkulator-roi-control-blend-layers {
  display: none;
}

.kalkulator-roi-card-wash {
  position: absolute;
  box-sizing: border-box;
  border-radius: var(--kalkulator-roi-card-radius);
  overflow: hidden;
}

.kalkulator-roi-card-wash[hidden] {
  display: none;
}

.kalkulator-roi-card-wash__fill {
  width: 100%;
  height: 100%;
  background-color: var(--soft-light-wash-fill-enhanced, rgb(255 255 255 / 1));
}

.kalkulator-roi-btn-wash {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.kalkulator-roi-btn-wash[hidden] {
  display: none;
}

.kalkulator-roi-btn-wash__fill {
  width: 100%;
  height: 100%;
  background-color: var(--btn-hero-secondary-bg);
  transition: background-color var(--btn-hero-secondary-hover-duration) var(--motion-ease-out);
}

#section-content:has([data-roi-ctrl-wash-anchor="sbtn-core"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-core"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="sbtn-core"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-core"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="sbtn-pro"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-pro"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="sbtn-pro"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-pro"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="sbtn-max"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-max"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="sbtn-max"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="sbtn-max"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-A"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-A"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-A"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-A"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-B"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-B"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-B"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-B"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-C"]:hover) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-C"] .kalkulator-roi-btn-wash__fill,
#section-content:has([data-roi-ctrl-wash-anchor="tab-C"]:focus-visible) .kalkulator-roi-btn-wash[data-roi-ctrl-wash="tab-C"] .kalkulator-roi-btn-wash__fill {
  background-color: var(--btn-hero-secondary-bg-hover);
}

.kalkulator-roi {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-layout-gap);
  width: 100%;
  max-width: var(--layout-content-width);
}

.kalkulator-roi__intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
}

.kalkulator-roi__intro-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--kalkulator-roi-layout-gap);
  width: 100%;
  margin-bottom: var(--kalkulator-roi-intro-row-margin-bottom);
}

.kalkulator-roi__intro.is-step-labeled .kalkulator-roi__intro-row {
  margin-bottom: var(--kalkulator-roi-intro-step-offset);
}

.kalkulator-roi__intro:has(#seg-change-bar:not([style*="display: none"])) .kalkulator-roi__intro-row {
  margin-bottom: var(--kalkulator-roi-seg-change-margin-bottom);
}

.kalkulator-roi__intro-copy {
  max-width: var(--kalkulator-roi-intro-lead-max-width);
  min-width: 0;
}

.kalkulator-roi__intro-brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--kalkulator-roi-intro-brand-gap);
}

a.kalkulator-roi__intro-logo {
  display: block;
  opacity: 1;
  transition: none;
}

a.kalkulator-roi__intro-logo:hover,
a.kalkulator-roi__intro-logo:focus-visible {
  opacity: 1;
}

.kalkulator-roi__intro-logo img {
  display: block;
  width: var(--kalkulator-roi-intro-logo-width);
  height: var(--kalkulator-roi-intro-logo-height);
  object-fit: contain;
  pointer-events: none;
}

.kalkulator-roi__intro-seg-logo-link {
  display: block;
  line-height: 0;
  opacity: 1;
  filter: none;
  transform: none;
  text-decoration: none;
  transition: none;
}

a.kalkulator-roi__intro-seg-logo-link:hover,
a.kalkulator-roi__intro-seg-logo-link:focus-visible,
a.kalkulator-roi__intro-seg-logo-link:active {
  opacity: 1;
  filter: none;
  transform: none;
  text-decoration: none;
}

.kalkulator-roi__intro-seg-logo {
  display: block;
  width: var(--kalkulator-roi-intro-seg-logo-max-width);
  height: var(--kalkulator-roi-intro-seg-logo-height);
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
}

.kalkulator-roi__intro-seg-logo-link[hidden],
.kalkulator-roi__intro-seg-logo[hidden],
.kalkulator-roi__intro-logo[hidden] {
  display: none;
}

.kalkulator-roi__intro-seg-change {
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
}

.kalkulator-roi__intro-seg-change .btn--hero {
  width: var(--btn-hero-width);
  max-width: 100%;
}

.kalkulator-roi__eyebrow {
  display: block;
  margin-bottom: var(--kalkulator-roi-intro-eyebrow-margin);
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  line-height: calc(var(--h1-light-line-height) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.kalkulator-roi__title {
  margin: 0 0 var(--kalkulator-roi-intro-title-margin);
  font-size: var(--subpage-intro-title-size);
  line-height: var(--subpage-intro-title-line-height);
  font-weight: var(--h3-bold-weight);
  color: var(--color-text);
}

.kalkulator-roi__title-accent {
  color: var(--color-accent);
}

.kalkulator-roi__lead {
  margin: 0;
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  line-height: var(--text-lg-line-height);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

.kalkulator-roi__step-label {
  display: block;
  margin: 0 0 var(--kalkulator-roi-layout-gap);
  font-size: var(--kalkulator-roi-step-label-size);
  line-height: 1.3;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 1;
}

.kalkulator-roi__step-label[hidden] {
  display: none;
}

.roi-pick-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kalkulator-roi-cards-gap);
  align-items: start;
  width: 100%;
}

.roi-pick-card {
  min-width: 0;
}

.roi-pick-card__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: auto;
}

.roi-pick-card__body,
.roi-pick-card__outline {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: var(--kalkulator-roi-card-radius);
}

.roi-pick-card__body {
  background-color: var(--kalkulator-roi-card-body-bg);
}

html:not(.blend-enhanced) .roi-pick-card__body {
  background-color: var(--soft-light-wash-fill-fallback);
  filter: var(--soft-light-wash-fallback-filter);
}

html.blend-enhanced .roi-pick-card__body {
  background-color: transparent;
}

.roi-pick-card__outline {
  z-index: 1;
  box-sizing: border-box;
  border: var(--outline-width) solid var(--outline-color);
  background: transparent;
}

.roi-pick-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--kalkulator-roi-coord-scale));
  padding: var(--kalkulator-roi-card-padding);
  box-sizing: border-box;
}

.roi-pick-card__logo {
  display: flex;
  align-items: center;
  min-height: var(--kalkulator-roi-card-logo-height);
  margin-bottom: var(--kalkulator-roi-card-logo-margin-bottom);
}

.roi-pick-card__logo img {
  display: block;
  width: auto;
  max-width: var(--kalkulator-roi-card-logo-max-width);
  height: var(--kalkulator-roi-card-logo-height);
  object-fit: contain;
  object-position: left center;
}

.roi-pick-card__logo:not(:has(img)) {
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

.roi-pick-card__title {
  margin: 0 0 var(--kalkulator-roi-card-title-margin-bottom);
  font-size: calc(var(--h2-medium-size) * var(--kalkulator-roi-coord-scale));
  line-height: calc(var(--h2-medium-line-height) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.roi-pick-card__logo + .roi-pick-card__title,
.roi-pick-card__title + .roi-pick-card__stat,
.roi-pick-card__title + .roi-pick-card__desc,
.roi-pick-card__stat + .roi-pick-card__desc {
  margin-top: calc(-12px * var(--kalkulator-roi-coord-scale));
}

.roi-pick-card__stat {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--kalkulator-roi-coord-scale));
  margin: 0 0 var(--kalkulator-roi-card-stat-margin-bottom);
  padding: calc(12px * var(--kalkulator-roi-coord-scale));
  box-sizing: border-box;
  border: var(--outline-width) solid var(--outline-color);
  border-radius: var(--kalkulator-roi-stat-radius);
  background-color: var(--kalkulator-roi-stat-bg);
}

.roi-pick-card__stat-highlight {
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.roi-pick-card__stat-compare {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 0.7;
}

.roi-pick-card__desc {
  margin: 0 0 var(--kalkulator-roi-card-desc-margin-bottom);
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  line-height: calc(24px * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

.roi-pick-card__desc--when {
  opacity: 1;
  font-size: calc(20px * var(--kalkulator-roi-coord-scale));
  line-height: calc(28px * var(--kalkulator-roi-coord-scale));
  margin-bottom: calc(44px * var(--kalkulator-roi-coord-scale));
}

.roi-pick-card__desc--when + .btn {
  margin-top: calc(-12px * var(--kalkulator-roi-coord-scale));
}

.roi-pick-card .btn {
  width: 100%;
}

.roi-change-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kalkulator-roi-change-bar-gap);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.roi-change-bar .btn--hero {
  width: var(--btn-hero-width);
  max-width: 100%;
}

.calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--kalkulator-roi-calc-gap);
  align-items: start;
  width: 100%;
}

/* Form + results share the 2/3 column; 1fr track keeps that width. */
.calc-layout__form,
.calc-layout__results {
  grid-column: 1;
}

.calc-layout__form {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-panel-gap);
  min-width: 0;
}

.seg-panels {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-panel-gap);
  min-width: 0;
}

.calc-layout__results {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-result-card-gap);
  min-width: 0;
}

/* Cost-of-inaction tile — right column; sticky Y via JS (scale transform breaks CSS sticky). */
.calc-layout__inaction {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.calc-layout__inaction-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-result-card-gap);
  width: 100%;
}

#inaction-card {
  width: 100%;
}

#roi-pdf-open.roi-pdf-open {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: var(--kalkulator-roi-field-input-height);
  padding-inline: calc(var(--btn-padding-inline) * var(--kalkulator-roi-coord-scale));
  border-radius: var(--kalkulator-roi-field-radius);
  font-size: calc(var(--btn-hero-font-size) * var(--kalkulator-roi-coord-scale));
  background-color: var(--btn-hero-bg);
  color: var(--btn-color);
}

#roi-pdf-open.roi-pdf-open:hover,
#roi-pdf-open.roi-pdf-open:focus-visible {
  background-color: var(--btn-hero-bg-hover);
}

/* Modal submit — contact outlined-wash fallback fill (no blend-layer wash). */
.roi-pdf-modal__submit.btn--outlined-wash .btn--outlined-wash__body {
  background-color: var(--soft-light-wash-fill-fallback);
}

.roi-pdf-modal__submit.btn--outlined-wash:hover .btn--outlined-wash__body,
.roi-pdf-modal__submit.btn--outlined-wash:focus-visible .btn--outlined-wash__body {
  background-color: var(--soft-light-wash-fill-hover-fallback);
}

.roi-pdf-modal__submit.btn--outlined-wash .btn--outlined-wash__frame::after {
  border: var(--outline-width) solid var(--outline-color);
}

.roi-pdf-modal__submit.btn--outlined-wash:focus-visible {
  outline: var(--btn-focus-outline-width) solid var(--btn-focus-outline-color);
  outline-offset: var(--btn-focus-outline-offset);
}

/* Local fill — sticky translateY would desync the before-scale soft-light wash. */
#inaction-card .result-card__frame {
  overflow: hidden;
  border-radius: var(--kalkulator-roi-card-radius);
}

#inaction-card .result-card__body,
html.blend-enhanced #inaction-card .result-card__body,
html:not(.blend-enhanced) #inaction-card .result-card__body {
  background-color: var(--kalkulator-roi-card-body-bg);
  filter: none;
}

.form-panel {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 100%;
}

#bak-p2,
#cat-p2,
#liq-p2 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#bak-p2 .form-panel__frame,
#cat-p2 .form-panel__frame,
#liq-p2 .form-panel__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#bak-p2 .form-panel__content,
#cat-p2 .form-panel__content,
#liq-p2 .form-panel__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#bak-p2 .form-panel-body,
#cat-p2 .form-panel-body,
#liq-p2 .form-panel-body {
  flex: 0 0 auto;
}

.result-card {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 100%;
}

/* Main ROI card — content height (stacked under form). */
#result-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#result-main .result-card__frame {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#result-main .result-card__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#result-main .empty-state {
  justify-content: center;
}

#result-main #result-content {
  flex: 0 0 auto;
}

.form-panel__frame {
  position: relative;
  isolation: isolate;
}

.form-panel__body,
.form-panel__outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--kalkulator-roi-card-radius);
}

.form-panel__body {
  background-color: var(--kalkulator-roi-card-body-bg);
}

.form-panel__outline {
  z-index: 1;
  box-sizing: border-box;
  border: var(--outline-width) solid var(--outline-color);
}

.form-panel__content {
  position: relative;
  z-index: 2;
  padding: var(--kalkulator-roi-panel-padding);
  box-sizing: border-box;
}

.form-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16px * var(--kalkulator-roi-coord-scale));
}

.panel-step {
  font-size: var(--kalkulator-roi-step-label-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 0;
}

.form-panel-body {
  display: block;
  padding-top: calc(24px * var(--kalkulator-roi-coord-scale));
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kalkulator-roi-field-row-gap);
}

.field-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-field-gap);
  min-width: 0;
}

.calc-field__control-wrap {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  height: var(--kalkulator-roi-field-height);
  padding-left: var(--kalkulator-roi-field-inset-start);
  border-radius: var(--kalkulator-roi-field-radius);
  border: var(--outline-width) solid var(--kalkulator-roi-field-outline);
  background-color: var(--kalkulator-roi-field-bg);
  overflow: hidden;
}

.calc-field__control-wrap:focus-within {
  border-color: transparent;
}

.calc-field__prefix {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  padding-right: var(--kalkulator-roi-field-value-gap);
  font-size: var(--kalkulator-roi-field-font-size);
  line-height: 1.2;
  font-weight: var(--font-weight-light);
  color: var(--kalkulator-roi-field-placeholder);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  transition:
    opacity 0.2s ease,
    max-width 0.2s ease,
    padding 0.2s ease;
}

.calc-field__control-wrap:focus-within .calc-field__prefix,
.calc-field__control-wrap.is-filled .calc-field__prefix {
  opacity: 0;
  max-width: 0;
  padding-right: 0;
  pointer-events: none;
}

.calc-field__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-right: var(--kalkulator-roi-field-padding-inline);
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--kalkulator-roi-field-font-size);
  line-height: 1.2;
  appearance: textfield;
}

.calc-field__input::placeholder {
  color: var(--kalkulator-roi-field-placeholder);
  opacity: 1;
}

.calc-field__input::-webkit-outer-spin-button,
.calc-field__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.calc-field__input:focus {
  outline: none;
}

.calc-field__suffix {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: var(--kalkulator-roi-field-padding-inline);
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kalkulator-roi-field-placeholder);
  pointer-events: none;
}

.calc-field__note {
  margin: 0;
  padding-left: var(--calc-field-note-offset, var(--kalkulator-roi-field-inset-start));
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  line-height: 1.4;
  font-weight: var(--font-weight-light);
  opacity: 0.55;
}

.result-card__frame {
  position: relative;
  isolation: isolate;
}

.result-card__body,
.result-card__outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--kalkulator-roi-card-radius);
}

.result-card__body {
  background-color: var(--kalkulator-roi-card-body-bg);
}

html:not(.blend-enhanced) .form-panel__body,
html:not(.blend-enhanced) .result-card__body {
  background-color: var(--soft-light-wash-fill-fallback);
  filter: var(--soft-light-wash-fallback-filter);
}

html.blend-enhanced .form-panel__body,
html.blend-enhanced .result-card__body {
  background-color: transparent;
}

.result-card__outline {
  z-index: 1;
  box-sizing: border-box;
  border: var(--outline-width) solid var(--outline-color);
}

.result-card__content {
  position: relative;
  z-index: 2;
  padding: var(--kalkulator-roi-result-padding);
  box-sizing: border-box;
}

.result-card__label {
  display: block;
  margin-bottom: calc(24px * var(--kalkulator-roi-coord-scale));
  font-size: var(--kalkulator-roi-step-label-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 1;
}

.size-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kalkulator-roi-size-btn-gap);
  margin-bottom: 0;
}

.size-btn {
  appearance: none;
  position: relative;
  z-index: 1;
  height: var(--kalkulator-roi-size-btn-height);
  border: var(--outline-width) solid transparent;
  border-radius: var(--kalkulator-roi-size-btn-radius);
  background-color: rgb(255 255 255 / 0.2);
  color: var(--color-text);
  font: inherit;
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide, 0.04em);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out),
    opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.size-btn:hover,
.size-btn:focus-visible {
  opacity: 1;
}

.size-btn.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  opacity: 1;
}

.size-autodetect {
  margin-top: var(--kalkulator-roi-field-row-gap);
  margin-bottom: 0;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.size-spec-row {
  margin-top: var(--kalkulator-roi-field-row-gap);
  margin-bottom: 0;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  opacity: 1;
  letter-spacing: 0.01em;
}

.result-output__drivers {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--kalkulator-roi-coord-scale));
  margin: calc(8px * var(--kalkulator-roi-coord-scale)) 0 calc(4px * var(--kalkulator-roi-coord-scale));
}

.driver-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  padding: calc(2px * var(--kalkulator-roi-coord-scale)) 0;
}

.driver-row__label {
  color: var(--color-text);
  opacity: 1;
}

.driver-row__val {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  white-space: nowrap;
  margin-left: calc(12px * var(--kalkulator-roi-coord-scale));
}

.scenario-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kalkulator-roi-size-btn-gap);
  margin-bottom: var(--kalkulator-roi-field-row-gap);
}

.scenario-tab {
  appearance: none;
  position: relative;
  z-index: 1;
  height: var(--kalkulator-roi-size-btn-height);
  border: var(--outline-width) solid transparent;
  border-radius: var(--kalkulator-roi-size-btn-radius);
  background-color: rgb(255 255 255 / 0.2);
  color: var(--color-text);
  font: inherit;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide, 0.04em);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    border-color var(--motion-duration-fast) var(--motion-ease-out);
}

.scenario-tab.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.scenario-desc {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
  line-height: 1.4;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--kalkulator-roi-coord-scale));
  padding: calc(32px * var(--kalkulator-roi-coord-scale)) 0;
  text-align: center;
  opacity: 1;
}

.empty-state__icon {
  display: block;
  width: calc(40px * var(--kalkulator-roi-coord-scale));
  height: calc(40px * var(--kalkulator-roi-coord-scale));
  object-fit: contain;
}

.empty-state p {
  margin: 0;
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  line-height: 1.4;
}

.result-output {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-result-section-gap);
}

.result-output__hero .result-card__label {
  margin-bottom: calc(24px * var(--kalkulator-roi-coord-scale));
}

.roi-big {
  font-size: var(--kalkulator-roi-payback-size);
  line-height: var(--kalkulator-roi-payback-line-height);
  font-weight: var(--h2-bold-weight);
  letter-spacing: var(--h2-bold-letter-spacing);
  color: var(--color-text);
}

.roi-sub {
  margin-top: var(--kalkulator-roi-result-block-gap);
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.timeline-wrap {
  margin: 0;
}

.timeline-label-row,
.timeline-ticks {
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.timeline-track {
  position: relative;
  height: var(--kalkulator-roi-timeline-height);
  margin: var(--kalkulator-roi-result-block-gap) 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
  overflow: visible;
}

.timeline-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}

.timeline-marker {
  position: absolute;
  top: 50%;
  width: calc(14px * var(--kalkulator-roi-coord-scale));
  height: calc(14px * var(--kalkulator-roi-coord-scale));
  margin-left: calc(-7px * var(--kalkulator-roi-coord-scale));
  border-radius: 50%;
  background: var(--color-accent);
  border: var(--outline-width) solid var(--color-text);
  transform: translateY(-50%);
  box-sizing: border-box;
}

.timeline-marker.is-good {
  background: var(--color-accent);
}

.roi-annual-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kalkulator-roi-result-block-gap);
  margin: 0;
  padding: 0 var(--kalkulator-roi-field-padding-inline) 0 var(--kalkulator-roi-field-inset-start);
  min-height: var(--kalkulator-roi-field-height);
  border: none;
  border-radius: var(--kalkulator-roi-result-surface-radius);
  background-color: var(--kalkulator-roi-result-surface);
  box-sizing: border-box;
}

.roi-annual-label {
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
}

.roi-annual-val {
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.result-output__summaries {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-result-block-gap);
}

.subtotal-row,
.investment-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kalkulator-roi-result-block-gap);
  margin: 0;
  padding: calc(16px * var(--kalkulator-roi-coord-scale)) var(--kalkulator-roi-field-padding-inline)
    calc(16px * var(--kalkulator-roi-coord-scale)) var(--kalkulator-roi-field-inset-start);
  border: none;
  border-radius: var(--kalkulator-roi-result-surface-radius);
  background-color: var(--kalkulator-roi-result-surface);
  box-sizing: border-box;
}

.subtotal-row.certain,
.subtotal-row.estimated {
  background-color: var(--kalkulator-roi-result-surface);
}

.subtotal-label,
.investment-label {
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
}

.subtotal-sub,
.investment-sub {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
  margin-top: calc(4px * var(--kalkulator-roi-coord-scale));
}

.subtotal-val,
.investment-val {
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.investment-val {
  max-width: calc(280px * var(--kalkulator-roi-coord-scale));
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-medium);
  white-space: normal;
  text-align: right;
  line-height: 1.35;
}

.subtotal-val.is-zero,
.inaction-row-val.is-zero {
  color: rgb(255 255 255 / 0.4);
  font-weight: var(--font-weight-light);
}

.result-output__footer {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-result-block-gap);
}

#result-main .result-output__footer {
  gap: 0;
}

.result-output__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kalkulator-roi-result-block-gap);
  align-items: stretch;
}

#result-main .result-output__actions {
  margin-top: calc(40px * var(--kalkulator-roi-coord-scale));
}

a.result-cta.btn--hero,
button.result-cta.btn--hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding-inline: calc(var(--btn-padding-inline) * var(--kalkulator-roi-coord-scale));
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  border: none;
  font: inherit;
}

button.result-cta.btn--hero:disabled {
  opacity: 0.55;
  cursor: wait;
}

.result-disclaimer {
  margin: 0;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  line-height: 1.45;
  font-weight: var(--font-weight-light);
  opacity: 1;
}

/* PDF email gate modal */
html.roi-pdf-modal-open {
  overflow: hidden;
}

.roi-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: calc(24px * var(--kalkulator-roi-coord-scale));
  box-sizing: border-box;
}

.roi-pdf-modal[hidden] {
  display: none;
}

.roi-pdf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--kalkulator-roi-pdf-modal-backdrop);
  border: none;
  cursor: pointer;
}

.roi-pdf-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, var(--kalkulator-roi-pdf-modal-max-width));
  padding: var(--kalkulator-roi-pdf-modal-padding);
  border-radius: var(--service-card-border-radius);
  border: var(--outline-width) solid rgb(255 255 255 / 1);
  background-color: var(--service-card-body-bg);
  box-shadow: none;
  box-sizing: border-box;
}

.roi-pdf-modal__close {
  position: absolute;
  top: calc(12px * var(--kalkulator-roi-coord-scale));
  right: calc(16px * var(--kalkulator-roi-coord-scale));
  width: calc(36px * var(--kalkulator-roi-coord-scale));
  height: calc(36px * var(--kalkulator-roi-coord-scale));
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: calc(28px * var(--kalkulator-roi-coord-scale));
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.roi-pdf-modal__close:hover,
.roi-pdf-modal__close:focus-visible {
  opacity: 1;
}

.roi-pdf-modal__title {
  margin: 0 0 var(--kalkulator-roi-pdf-modal-gap);
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.roi-pdf-modal__lead {
  margin: 0 0 var(--kalkulator-roi-pdf-modal-gap);
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
  font-weight: var(--font-weight-light);
  color: var(--color-text);
}

.roi-pdf-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--kalkulator-roi-pdf-modal-gap);
}

.roi-pdf-modal__field {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--kalkulator-roi-coord-scale));
}

.roi-pdf-modal__field .calc-field__control-wrap {
  width: 100%;
  background-color: var(--kontakt-field-bg);
  border-color: var(--kontakt-field-outline-color);
}

.roi-pdf-modal__field .calc-field__prefix,
.roi-pdf-modal__field .calc-field__input {
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
}

.roi-pdf-modal__field .calc-field__control-wrap:focus-within {
  border-color: var(--kontakt-field-outline-color);
}

.roi-pdf-modal__field .calc-field__control-wrap:has([aria-invalid="true"]) {
  border-color: var(--color-accent);
}

.roi-pdf-modal__field .calc-field__input:-webkit-autofill,
.roi-pdf-modal__field .calc-field__input:-webkit-autofill:hover,
.roi-pdf-modal__field .calc-field__input:-webkit-autofill:focus,
.roi-pdf-modal__field .calc-field__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--kontakt-field-bg) inset;
  box-shadow: 0 0 0 1000px var(--kontakt-field-bg) inset;
  transition: background-color 99999s ease-out 0s;
}

.roi-pdf-modal__error {
  margin: 0;
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
  color: rgb(255 160 160 / 1);
}

.roi-pdf-modal__consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--kontakt-consent-gap);
  padding-block: var(--kontakt-consent-block-spacing);
  padding-left: 0;
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
  font-weight: var(--font-weight-light);
  color: rgb(255 255 255 / 0.85);
  cursor: pointer;
}

.roi-pdf-modal__consent input[type="checkbox"] {
  appearance: none;
  flex-shrink: 0;
  width: var(--kontakt-consent-checkbox-size);
  height: var(--kontakt-consent-checkbox-size);
  margin-top: calc(5px * var(--kalkulator-roi-coord-scale));
  margin-left: calc(2px * var(--kalkulator-roi-coord-scale));
  border: none;
  border-radius: var(--kontakt-consent-checkbox-radius);
  background-color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.roi-pdf-modal__consent input[type="checkbox"]:checked {
  background-color: var(--color-accent);
}

.roi-pdf-modal__consent:has(input[type="checkbox"]:checked)::before,
.roi-pdf-modal__consent:has(input[type="checkbox"]:checked)::after {
  content: "";
  position: absolute;
  top: calc(
    var(--kontakt-consent-block-spacing) + 5px * var(--kalkulator-roi-coord-scale) +
      var(--kontakt-consent-checkbox-size) / 2
  );
  left: calc(2px * var(--kalkulator-roi-coord-scale) + var(--kontakt-consent-checkbox-size) / 2);
  width: calc(var(--kontakt-consent-checkbox-size) * 0.55);
  height: calc(2px * var(--kalkulator-roi-coord-scale));
  background-color: var(--color-text);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.roi-pdf-modal__consent:has(input[type="checkbox"]:checked)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.roi-pdf-modal__consent input[type="checkbox"]:focus-visible {
  outline: var(--btn-focus-outline-width) solid var(--btn-focus-outline-color);
  outline-offset: var(--btn-focus-outline-offset);
}

.roi-pdf-modal__consent input[type="checkbox"][aria-invalid="true"] {
  box-shadow: 0 0 0 var(--outline-width) var(--color-accent);
}

.roi-pdf-modal__consent-legal,
.roi-pdf-modal__consent-legal a {
  font-weight: var(--font-weight-medium);
}

.roi-pdf-modal__consent a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity var(--link-transition-duration, var(--motion-duration-fast))
    var(--motion-ease-out);
}

.roi-pdf-modal__consent a:hover,
.roi-pdf-modal__consent a:focus-visible {
  opacity: var(--color-text-hover-opacity);
}

.roi-pdf-modal__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.roi-pdf-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kalkulator-roi-result-block-gap);
}

.roi-pdf-modal__submit.btn--outlined-wash {
  width: 100%;
  max-width: 100%;
  height: var(--kontakt-submit-height);
  border-radius: var(--kontakt-submit-radius);
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
}

.roi-pdf-modal__submit.btn--outlined-wash:disabled {
  opacity: var(--color-text-hover-opacity);
  cursor: wait;
}

.roi-pdf-modal__status {
  margin: 0;
  font-size: var(--kalkulator-roi-pdf-modal-font-size);
  line-height: var(--kalkulator-roi-pdf-modal-line-height);
}

.roi-pdf-modal__status--error {
  color: rgb(255 160 160 / 1);
}

.roi-pdf-modal__status--success {
  color: var(--kalkulator-roi-green);
}

.b2b-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kalkulator-roi-field-row-gap);
  margin: 0 0 var(--kalkulator-roi-result-block-gap);
}

.b2b-shelf-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(8px * var(--kalkulator-roi-coord-scale));
  min-height: var(--kalkulator-roi-field-height);
  padding: calc(16px * var(--kalkulator-roi-coord-scale)) var(--kalkulator-roi-field-padding-inline)
    calc(16px * var(--kalkulator-roi-coord-scale)) var(--kalkulator-roi-field-inset-start);
  border: none;
  border-radius: var(--kalkulator-roi-result-surface-radius);
  background-color: var(--kalkulator-roi-result-surface);
  box-sizing: border-box;
}

.b2b-shelf-item__val {
  font-size: calc(var(--text-lg) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.b2b-shelf-item__val--after {
  color: var(--color-text);
}

.b2b-shelf-item__lbl {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  opacity: 1;
}

.b2b-potential-label {
  margin: 0 0 var(--kalkulator-roi-result-block-gap);
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.b2b-channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kalkulator-roi-field-row-gap);
  margin: 0 0 var(--kalkulator-roi-result-block-gap);
}

.b2b-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--kalkulator-roi-field-input-height);
  padding: 0 calc(20px * var(--kalkulator-roi-coord-scale));
  border: none;
  border-radius: var(--kalkulator-roi-field-radius);
  background-color: var(--kalkulator-roi-result-surface);
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
}

.b2b-note {
  margin: 0;
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
  line-height: 1.4;
}

#b2b-card a.result-cta.btn--hero {
  margin-top: calc(40px * var(--kalkulator-roi-coord-scale));
}

#inaction-card .result-card__content {
  position: relative;
}

#inaction-card .result-card__content,
#inaction-card .result-card__content * {
  opacity: 1;
}

.inaction-card__icon {
  position: absolute;
  top: calc(
    var(--kalkulator-roi-result-padding) +
      (var(--kalkulator-roi-step-label-size) * 1.3 - var(--kalkulator-roi-inaction-icon-size)) / 2
  );
  right: var(--kalkulator-roi-result-padding);
  display: block;
  width: var(--kalkulator-roi-inaction-icon-size);
  height: var(--kalkulator-roi-inaction-icon-size);
  object-fit: contain;
  opacity: 1;
  pointer-events: none;
}

.inaction-header {
  display: block;
  margin-bottom: calc(24px * var(--kalkulator-roi-coord-scale));
  padding-right: calc(
    var(--kalkulator-roi-inaction-icon-size) + var(--kalkulator-roi-result-block-gap)
  );
}

.inaction-header .result-card__label {
  margin-bottom: 0;
  opacity: 1;
}

.inaction-ticker-label {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.inaction-ticker {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8px * var(--kalkulator-roi-coord-scale));
  margin: calc(8px * var(--kalkulator-roi-coord-scale)) 0;
  font-size: calc(36px * var(--kalkulator-roi-coord-scale));
  line-height: 1.1;
  font-weight: var(--font-weight-bold);
  opacity: 1;
}

.inaction-ticker__num {
  display: inline-block;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  opacity: 1;
}

.inaction-ticker__unit {
  flex-shrink: 0;
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.inaction-sub {
  margin-bottom: calc(12px * var(--kalkulator-roi-coord-scale));
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  opacity: 1;
}

.inaction-row {
  display: flex;
  justify-content: space-between;
  gap: calc(12px * var(--kalkulator-roi-coord-scale));
  padding-top: calc(12px * var(--kalkulator-roi-coord-scale));
  border-top: var(--outline-width) solid rgb(255 255 255 / 1);
  opacity: 1;
}

.inaction-row-label {
  font-size: calc(var(--text-sm) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-light);
  opacity: 1;
}

.inaction-row-val {
  font-size: calc(var(--text-md) * var(--kalkulator-roi-coord-scale));
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  opacity: 1;
}

#inaction-card .inaction-row-val.is-zero {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  opacity: 1;
}

@media (max-width: 1280px) {
  .kalkulator-roi__intro-row {
    flex-direction: column;
  }

  .roi-pick-cards {
    grid-template-columns: 1fr;
  }

  .calc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc-layout__form,
  .calc-layout__results,
  .calc-layout__inaction {
    grid-column: 1;
    grid-row: auto;
  }

  .calc-layout__inaction {
    z-index: auto;
  }

  #inaction-card {
    transform: none !important;
  }

  #inaction-sticky-root {
    transform: none !important;
  }

  #bak-p2,
  #cat-p2,
  #liq-p2,
  #result-main {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px) {
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@import url("../components/subpage-text.css");