/* =========================================================
   NIPPON FITNESS CHECKOUT MASTER
   Version 0.2.0 · CI LIGHT/DARK BALANCE
   ========================================================= */

:root {
  --nfco-red: #db0000;
  --nfco-black: #111111;
  --nfco-charcoal: #222222;
  --nfco-darkgray: #343434;
  --nfco-bg: #f2f2f0;
  --nfco-card: #ffffff;
  --nfco-soft: #e9e9e7;
  --nfco-line: #d7d7d3;
  --nfco-text: #171717;
  --nfco-muted: #686868;
  --nfco-radius: 22px;
  --nfco-pill: 999px;
}

body.nfco-lock {
  overflow: hidden !important;
}

.nfco,
.nfco * {
  box-sizing: border-box;
}

.nfco [hidden] {
  display: none !important;
}

.nfco {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  font-family: Montserrat, Arial, sans-serif;
  color: var(--nfco-text);
}

.nfco.is-open {
  display: block;
}

.nfco__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nfco__panel {
  position: absolute;
  inset: 2.5vh 2.5vw;
  max-width: 1440px;
  margin: auto;
  background: var(--nfco-bg);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
}

/* =========================================================
   HEADER / CLOSE
   ========================================================= */

.nfco__close {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease;
}

.nfco__close:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .32);
}

.nfco__close span {
  position: absolute;
  width: 13px;
  height: 1.5px;
  left: 50%;
  top: 50%;
  margin-left: -6.5px;
  margin-top: -.75px;
  background: rgba(255, 255, 255, .78);
  border-radius: 2px;
}

.nfco__close span:first-child {
  transform: rotate(45deg);
}

.nfco__close span:last-child {
  transform: rotate(-45deg);
}

.nfco__header {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 24px 76px 22px 42px;
  background: var(--nfco-black);
  color: #fff;
}

.nfco__eyebrow {
  color: var(--nfco-red);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .065em;
}

.nfco__header h2,
.nfco__section-head h3,
.nfco__success h3 {
  margin: 5px 0 0;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .96;
}

.nfco__header h2 {
  color: #fff;
  font-size: clamp(28px, 3vw, 48px);
}

.nfco__header-price {
  flex: 0 0 auto;
  min-width: 230px;
  padding: 13px 18px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--nfco-black);
  text-align: right;
}

.nfco__header-price span,
.nfco__footer-total span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  color: var(--nfco-muted);
}

.nfco__header-price strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
}

.nfco__header-price small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: #777;
}

/* =========================================================
   PROGRESS
   ========================================================= */

.nfco__progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 42px;
  background: #fff;
  border-bottom: 1px solid var(--nfco-line);
}

.nfco__progress button {
  appearance: none;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #777;
  padding: 15px 8px 13px;
  display: flex;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
}

.nfco__progress button b {
  color: #a6a6a6;
}

.nfco__progress button.is-active {
  color: var(--nfco-black);
  border-color: var(--nfco-red);
}

.nfco__progress button.is-active b {
  color: var(--nfco-red);
}

/* =========================================================
   BODY / TYPO
   ========================================================= */

.nfco__form {
  display: contents;
}

.nfco__body {
  overflow: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.nfco__step,
.nfco__success {
  display: none;
  width: min(1160px, calc(100% - 84px));
  margin: 0 auto;
  padding: 36px 0 42px;
}

.nfco__step.is-active {
  display: block;
}

.nfco__success:not([hidden]) {
  display: block;
  text-align: center;
  max-width: 760px;
}

.nfco__section-head {
  max-width: 780px;
  margin-bottom: 26px;
}

.nfco__section-head h3,
.nfco__success h3 {
  color: var(--nfco-black);
  font-size: clamp(30px, 3.5vw, 54px);
}

.nfco__section-head p,
.nfco__success > p {
  margin: 12px 0 0;
  color: var(--nfco-muted);
  font-size: 13px;
  line-height: 1.65;
  max-width: 700px;
}

/* =========================================================
   TARIFE
   ========================================================= */

.nfco__tariffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nfco__tariff {
  position: relative;
  min-height: 166px;
  padding: 24px;
  text-align: left;
  border: 1px solid var(--nfco-line);
  background: var(--nfco-card);
  color: var(--nfco-black);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.nfco__tariff:hover {
  border-color: #9c9c98;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.nfco__tariff.is-selected {
  border-color: var(--nfco-red);
  background: var(--nfco-red);
  color: #fff;
  box-shadow: 0 13px 34px rgba(219, 0, 0, .16);
}

.nfco__tariff-name {
  display: block;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.nfco__tariff-copy {
  display: block;
  margin-top: 8px;
  color: var(--nfco-muted);
  font-size: 12px;
  line-height: 1.5;
}

.nfco__tariff.is-selected .nfco__tariff-copy {
  color: rgba(255, 255, 255, .82);
}

.nfco__tariff strong {
  display: block;
  margin-top: 23px;
  font-size: 17px;
  font-weight: 900;
}

.nfco__tag {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 5px 9px;
  border-radius: var(--nfco-pill);
  background: var(--nfco-black);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.nfco__tariff.is-selected .nfco__tag {
  background: #fff;
  color: var(--nfco-red);
}

/* =========================================================
   SEGMENTED CHOICES
   ========================================================= */

.nfco__choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.nfco__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.nfco__fieldset legend {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--nfco-black);
}

.nfco__segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 5px;
  background: #e5e5e2;
  border: 1px solid #d6d6d2;
  border-radius: var(--nfco-pill);
}

.nfco__segmented--3 {
  grid-template-columns: repeat(3, 1fr);
}

.nfco__segmented button {
  appearance: none;
  border: 0;
  padding: 12px 10px;
  background: transparent;
  color: #6c6c6c;
  border-radius: var(--nfco-pill);
  font-family: inherit;
  font-weight: 900;
  font-size: 10px;
  cursor: pointer;
}

.nfco__segmented button.is-selected {
  color: #fff;
  background: var(--nfco-black);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
}

.nfco__microcopy {
  margin-top: 9px;
  color: var(--nfco-muted);
  font-size: 11px;
  line-height: 1.5;
}

.nfco__start-package {
  margin-top: 16px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--nfco-line);
  border-radius: 14px;
  background: #fff;
}

.nfco__start-package div {
  flex: 0 0 auto;
}

.nfco__start-package span {
  display: block;
  color: var(--nfco-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.nfco__start-package strong {
  display: block;
  margin-top: 3px;
  color: var(--nfco-black);
  font-size: 14px;
  font-weight: 900;
}

.nfco__start-package p {
  margin: 0;
  color: var(--nfco-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

.nfco__renewal-note {
  margin-top: 10px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--nfco-line);
  border-left: 4px solid var(--nfco-red);
  border-radius: 14px;
  background: #f8f8f6;
}

.nfco__renewal-note div {
  flex: 0 0 auto;
}

.nfco__renewal-note span {
  display: block;
  color: var(--nfco-red);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.nfco__renewal-note strong {
  display: block;
  margin-top: 3px;
  color: var(--nfco-black);
  font-size: 14px;
  font-weight: 900;
}

.nfco__renewal-note p {
  margin: 0;
  max-width: 720px;
  color: var(--nfco-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

/* =========================================================
   MODULES
   ========================================================= */

.nfco__module-pricebar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--nfco-line);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
}

.nfco__module-pricebar div {
  padding: 14px 16px;
  border-right: 1px solid var(--nfco-line);
}

.nfco__module-pricebar div:last-child {
  border-right: 0;
}

.nfco__module-pricebar span {
  display: block;
  color: var(--nfco-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.nfco__module-pricebar strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.nfco__modules {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.nfco__module {
  appearance: none;
  position: relative;
  min-height: 116px;
  padding: 18px 14px;
  border: 1px solid var(--nfco-line);
  background: #fff;
  border-radius: 15px;
  color: var(--nfco-black);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nfco__module:hover:not([disabled]) {
  border-color: #a9a9a5;
}

.nfco__module strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

.nfco__module span {
  display: block;
  margin-top: 21px;
  color: var(--nfco-muted);
  font-size: 10px;
}

.nfco__module.is-selected {
  border-color: var(--nfco-red);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--nfco-red);
}

.nfco__module.is-selected::after {
  content: '✓';
  position: absolute;
  top: 11px;
  right: 12px;
  color: var(--nfco-red);
  font-weight: 900;
}

.nfco__module.is-included {
  cursor: default;
  border-color: #bcbcb8;
  background: #f8f8f6;
}

.nfco__module[disabled] {
  opacity: .38;
  cursor: not-allowed;
}

.nfco__bundle-note,
.nfco__upgrade {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--nfco-red);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nfco__bundle-note strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.nfco__bundle-note button,
.nfco__upgrade button {
  flex: 0 0 auto;
  border: 1px solid #c9c9c6;
  background: var(--nfco-charcoal);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--nfco-pill);
  font-family: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.nfco__upgrade {
  border-color: #cfcfcb;
  background: #fff;
}

.nfco__upgrade h4 {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.nfco__upgrade p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #555;
}

.nfco__upgrade button:hover,
.nfco__bundle-note button:hover {
  background: var(--nfco-red);
  border-color: var(--nfco-red);
}

/* =========================================================
   FORM FIELDS / ELIGIBILITY
   ========================================================= */

.nfco__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nfco__fields label,
.nfco__eligibility label {
  display: block;
}

.nfco__fields label > span,
.nfco__eligibility label > span {
  display: block;
  margin: 0 0 7px 2px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #3f3f3f;
}

.nfco__span-2 {
  grid-column: 1 / -1;
}

.nfco__fields input,
.nfco__eligibility input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #cfcfcb;
  border-radius: 13px;
  background: #fff;
  color: var(--nfco-black);
  outline: none;
  font-family: inherit;
  font-size: 13px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.nfco__fields input:focus,
.nfco__eligibility input:focus {
  border-color: var(--nfco-red);
  box-shadow: 0 0 0 2px rgba(219, 0, 0, .08);
}

.nfco__fields input.nfco-invalid,
.nfco__eligibility input.nfco-invalid {
  border-color: var(--nfco-red);
  box-shadow: 0 0 0 2px rgba(219, 0, 0, .10);
}

.nfco input:-webkit-autofill,
.nfco input:-webkit-autofill:hover,
.nfco input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nfco-black);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out 0s;
}

.nfco__date-summary {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--nfco-line);
  border: 1px solid var(--nfco-line);
  border-radius: 15px;
  overflow: hidden;
}

.nfco__date-summary div {
  background: #fff;
  padding: 15px;
}

.nfco__date-summary span {
  display: block;
  font-size: 9px;
  color: var(--nfco-muted);
  font-weight: 900;
  letter-spacing: .08em;
}

.nfco__date-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.nfco__eligibility {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #cfcfcb;
  border-left: 4px solid var(--nfco-red);
  border-radius: 14px;
  background: #fff;
}

.nfco__eligibility > strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
}

.nfco__eligibility > p {
  margin: 6px 0 14px;
  color: var(--nfco-muted);
  font-size: 11px;
  line-height: 1.55;
}

.nfco__checks {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.nfco__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid #d2d2ce;
  background: #fff;
  border-radius: 13px;
  cursor: pointer;
}

.nfco__check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--nfco-red);
  margin-top: 1px;
}

.nfco__check span {
  font-size: 11px;
  line-height: 1.55;
  color: #484848;
}

.nfco__check a {
  color: var(--nfco-black);
  text-decoration: underline;
  text-decoration-color: var(--nfco-red);
  text-underline-offset: 3px;
}

/* =========================================================
   CHECK / REVIEW
   ========================================================= */

.nfco__review-hero {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 18px;
  padding: 26px;
  border-radius: 20px;
  background: var(--nfco-black);
  color: #fff;
}

.nfco__review-hero h4 {
  margin: 5px 0 17px;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
}

.nfco__review-included {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nfco__review-included span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: var(--nfco-pill);
  border: 1px solid rgba(255, 255, 255, .17);
  color: rgba(255, 255, 255, .86);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .025em;
}

.nfco__review-price {
  min-height: 150px;
  padding: 19px;
  border-radius: 17px;
  background: #fff;
  color: var(--nfco-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}

.nfco__review-price > span {
  color: #6d6d6d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .10em;
}

.nfco__review-price strong {
  display: block;
  margin-top: 5px;
  color: var(--nfco-red);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

.nfco__review-price small {
  margin-top: 7px;
  color: #6d6d6d;
  font-size: 9px;
  font-weight: 800;
}

.nfco__review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.nfco__review-card {
  background: #fff;
  border: 1px solid var(--nfco-line);
  border-radius: 17px;
  overflow: hidden;
}

.nfco__review-card--payment {
  grid-column: 1 / -1;
}

.nfco__review-card-head {
  padding: 17px 20px 13px;
  border-bottom: 1px solid #ececea;
}

.nfco__review-card-head strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 900;
}

.nfco__review-card dl {
  margin: 0;
  padding: 9px 20px 14px;
}

.nfco__review-card dl div {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid #eeeeeb;
}

.nfco__review-card dl div:last-child {
  border-bottom: 0;
}

.nfco__review-card dt {
  color: var(--nfco-muted);
  font-size: 11px;
}

.nfco__review-card dd {
  margin: 0;
  color: var(--nfco-black);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

.nfco__final-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--nfco-red);
  background: #fff;
  border-radius: 12px;
  color: #555;
  font-size: 11px;
  line-height: 1.55;
}

/* =========================================================
   FOOTER NAVIGATION
   ========================================================= */

.nfco__footer {
  min-height: 78px;
  padding: 13px 42px;
  border-top: 1px solid var(--nfco-line);
  background: rgba(255, 255, 255, .98);
}

.nfco__footer-inner {
  width: min(1160px, 100%);
  min-height: 52px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.nfco__back,
.nfco__primary {
  appearance: none;
  min-height: 48px;
  padding: 0 23px;
  border-radius: var(--nfco-pill);
  border: 1px solid #c8c8c4;
  background: var(--nfco-charcoal);
  color: #fff;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.nfco__back {
  justify-self: start;
  grid-column: 1;
}

.nfco__primary,
.nfco__primary--pay {
  justify-self: end;
  grid-column: 3;
}

.nfco__back:hover,
.nfco__primary:hover {
  background: var(--nfco-red);
  border-color: var(--nfco-red);
}

.nfco__primary--pay {
  min-width: min(430px, 100%);
  background: var(--nfco-red);
  border-color: var(--nfco-red);
  line-height: 1.25;
}

.nfco__primary--pay:hover {
  background: #b90000;
  border-color: #b90000;
}

.nfco__primary:disabled {
  opacity: .55;
  cursor: wait;
}

.nfco__footer-total {
  grid-column: 2;
  text-align: center;
}

.nfco__footer-total strong {
  display: block;
  margin-top: 2px;
  color: var(--nfco-black);
  font-size: 19px;
  font-weight: 900;
}

/* =========================================================
   ERROR / SUCCESS
   ========================================================= */

.nfco__error {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 40px));
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--nfco-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
  z-index: 10;
}

.nfco__hp {
  position: absolute !important;
  left: -99999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.nfco__success-mark {
  width: 68px;
  height: 68px;
  margin: 12px auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nfco-red);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.nfco__success > .nfco__eyebrow {
  text-align: center;
}

.nfco__success > p {
  margin-left: auto;
  margin-right: auto;
}

.nfco__success-card {
  margin: 28px auto 20px;
  max-width: 520px;
  padding: 22px;
  background: #fff;
  color: #111;
  border: 1px solid var(--nfco-line);
  border-radius: 18px;
}

.nfco__success-card span {
  display: block;
  font-size: 9px;
  font-weight: 900;
  color: #666;
  letter-spacing: .09em;
}

.nfco__success-card strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.nfco__success-card p {
  margin: 12px 0 0;
  font-size: 12px;
  color: #555;
}

.nfco__success-next {
  margin-bottom: 24px !important;
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {
  .nfco__panel {
    inset: 0;
    border-radius: 0;
  }

  .nfco__header {
    min-height: 92px;
    padding: 20px 58px 18px 20px;
  }

  .nfco__header-price {
    display: none;
  }

  .nfco__progress {
    padding: 0 12px;
  }

  .nfco__progress button {
    padding: 13px 3px 11px;
  }

  .nfco__progress button span {
    display: none;
  }

  .nfco__step,
  .nfco__success {
    width: calc(100% - 34px);
    padding: 27px 0 34px;
  }

  .nfco__tariffs,
  .nfco__choice-grid,
  .nfco__fields,
  .nfco__review-grid,
  .nfco__review-hero {
    grid-template-columns: 1fr;
  }

  .nfco__tariff {
    min-height: 116px;
  }

  .nfco__tariff strong {
    margin-top: 13px;
  }

  .nfco__span-2,
  .nfco__review-card--payment {
    grid-column: auto;
  }

  .nfco__modules {
    grid-template-columns: 1fr 1fr;
  }

  .nfco__module-pricebar,
  .nfco__date-summary {
    grid-template-columns: 1fr;
  }

  .nfco__start-package,
  .nfco__renewal-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .nfco__start-package p,
  .nfco__renewal-note p {
    text-align: left;
  }

  .nfco__module-pricebar div {
    border-right: 0;
    border-bottom: 1px solid var(--nfco-line);
  }

  .nfco__module-pricebar div:last-child {
    border-bottom: 0;
  }

  .nfco__bundle-note,
  .nfco__upgrade {
    align-items: flex-start;
    flex-direction: column;
  }

  .nfco__review-price {
    min-height: 120px;
    text-align: left;
  }

  .nfco__footer {
    padding: 10px 16px;
    min-height: 72px;
  }

  .nfco__footer-inner {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }

  .nfco__footer-total {
    display: none;
  }

  .nfco__back {
    grid-column: 1;
    padding: 0 17px;
  }

  .nfco__primary,
  .nfco__primary--pay {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding: 0 16px;
  }

  .nfco__eyebrow,
  .nfco__section-head p {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .nfco__segmented--3 {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .nfco__modules {
    grid-template-columns: 1fr;
  }

  .nfco__module {
    min-height: 88px;
  }

  .nfco__review-card dl div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .nfco__review-card dd {
    text-align: left;
  }

  .nfco__footer-inner {
    grid-template-columns: 82px 1fr;
  }

  .nfco__back,
  .nfco__primary,
  .nfco__primary--pay {
    min-height: 46px;
    font-size: 9px;
  }
}

/* =========================================================
   VERSION 0.3.2 OVERRIDES
   CI-FINETUNING / PREIS-STICKER / FINAL-CHECK OPTIK
   ========================================================= */

.nfco__header {
  justify-content: flex-start !important;
  padding-right: 62px !important;
}

.nfco__header-price,
#nfco-header-price,
#nfco-review-price {
  display: none !important;
}

.nfco__tariff,
.nfco__module,
.nfco__segmented button,
.nfco__back,
.nfco__primary,
.nfco__primary--pay,
.nfco__bundle-note button,
.nfco__upgrade button {
  -webkit-appearance: none;
  appearance: none;
}

.nfco__tariff,
.nfco__module,
.nfco__segmented button {
  color: var(--nfco-black) !important;
}

.nfco__tariff-copy,
.nfco__module span,
.nfco__microcopy,
.nfco__section-head p {
  color: #5d5d5d !important;
}

.nfco__segmented button {
  background: transparent !important;
  color: #3f3f3f !important;
}

.nfco__segmented button:hover {
  background: #efefec !important;
  color: var(--nfco-black) !important;
}

.nfco__segmented button.is-selected {
  background: var(--nfco-charcoal) !important;
  color: #fff !important;
}

.nfco__tariff {
  border-color: #d4d4cf !important;
  background: #fff !important;
  color: var(--nfco-black) !important;
}

.nfco__tariff:hover {
  border-color: var(--nfco-red) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08) !important;
}

.nfco__tariff::before,
.nfco__module::before,
.nfco__benefit-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  transition: background .18s ease, opacity .18s ease;
  opacity: 0;
}

.nfco__tariff:hover::before,
.nfco__module:hover::before,
.nfco__benefit-card:hover::before,
.nfco__tariff.is-selected::before,
.nfco__module.is-selected::before {
  background: var(--nfco-red);
  opacity: 1;
}

.nfco__tariff.is-selected {
  background: #fff !important;
  color: var(--nfco-black) !important;
  border-color: var(--nfco-red) !important;
  box-shadow: 0 14px 34px rgba(219, 0, 0, .10) !important;
}

.nfco__tariff.is-selected .nfco__tariff-copy {
  color: #555 !important;
}

.nfco__tariff.is-selected .nfco__tariff-name,
.nfco__tariff.is-selected strong {
  color: var(--nfco-black) !important;
}

.nfco__tag {
  background: var(--nfco-red) !important;
  color: #fff !important;
}

.nfco__tariff.is-selected .nfco__tag {
  background: var(--nfco-charcoal) !important;
  color: #fff !important;
}

.nfco__module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  border-color: #d4d4cf !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--nfco-black) !important;
}

.nfco__module:hover:not([disabled]) {
  background: #fbfbfa !important;
  border-color: var(--nfco-red) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.06) !important;
}

.nfco__module strong {
  font-size: 12px;
  color: var(--nfco-black) !important;
}

.nfco__module span {
  margin-top: auto;
  font-size: 10px;
  color: #5d5d5d !important;
  font-weight: 700;
}

.nfco__module.is-selected {
  background: #fff !important;
  border-color: var(--nfco-red) !important;
  box-shadow: 0 0 0 1px var(--nfco-red), 0 12px 28px rgba(219,0,0,.08) !important;
}

.nfco__module.is-selected span,
.nfco__module.is-included span,
.nfco__module.is-included strong {
  color: var(--nfco-black) !important;
}

.nfco__module.is-included {
  background: #fff !important;
  border-color: #cfcfca !important;
  box-shadow: 0 0 0 1px rgba(219,0,0,.18) inset !important;
}

.nfco__module[disabled] {
  background: #f7f7f5 !important;
  color: #8a8a8a !important;
  opacity: .78 !important;
}

.nfco__module-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(219,0,0,.25);
  background: #fafafa;
  color: var(--nfco-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.nfco__module.is-selected .nfco__module-icon,
.nfco__module:hover .nfco__module-icon {
  background: rgba(219,0,0,.08) !important;
  border-color: rgba(219,0,0,.45) !important;
}

.nfco__back,
.nfco__primary {
  background: #3a3a3a !important;
  border-color: #3a3a3a !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nfco__back:hover,
.nfco__primary:hover,
.nfco__bundle-note button:hover,
.nfco__upgrade button:hover {
  background: var(--nfco-red) !important;
  border-color: var(--nfco-red) !important;
  color: #fff !important;
}

.nfco__primary--pay {
  background: var(--nfco-red) !important;
  border-color: var(--nfco-red) !important;
  color: #fff !important;
}

.nfco__primary--pay:hover {
  background: #b90000 !important;
  border-color: #b90000 !important;
}

.nfco__primary:disabled,
.nfco__primary--pay:disabled {
  opacity: .65 !important;
  color: rgba(255,255,255,.86) !important;
}

.nfco__review-hero {
  position: relative;
  display: block !important;
  padding: 32px 34px 26px !important;
  background: var(--nfco-black) !important;
}

.nfco__review-hero-copy {
  max-width: 100%;
}

.nfco__review-copy {
  margin: 10px 0 18px;
  max-width: 720px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.6;
}

.nfco__review-included {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  margin-top: 10px;
}

.nfco__benefit-card {
  position: relative;
  min-height: 104px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display: grid;
  align-content: start;
  gap: 7px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.nfco__benefit-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

.nfco__benefit-card i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(219,0,0,.16);
  border: 1px solid rgba(219,0,0,.42);
  color: #fff;
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.nfco__benefit-card b {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.nfco__benefit-card small {
  color: rgba(255,255,255,.68);
  font-size: 10px;
  line-height: 1.45;
}

.nfco__footer {
  min-height: 116px !important;
  padding: 14px 42px 18px !important;
  background: rgba(255,255,255,.98) !important;
}

.nfco__footer-inner {
  min-height: 84px !important;
  align-items: end !important;
}

.nfco__footer-total {
  display: block !important;
  justify-self: center;
  align-self: start;
}

.nfco__footer-sticker {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  padding: 18px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1ef 100%);
  border: 1px solid rgba(219,0,0,.16);
  box-shadow: 0 18px 36px rgba(0,0,0,.14), 0 4px 10px rgba(219,0,0,.08);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  transform: translateY(-26px);
}

.nfco__footer.is-final .nfco__footer-sticker {
  transform: translateY(-32px);
}

.nfco__footer-sticker span {
  display: block;
  color: #777 !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

.nfco__footer-sticker strong {
  display: block;
  margin-top: 6px;
  color: var(--nfco-red) !important;
  font-size: 36px !important;
  line-height: .98;
  font-weight: 900 !important;
  letter-spacing: -.05em;
}

.nfco__footer-sticker small {
  display: block;
  margin-top: 6px;
  color: #6b6b6b;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
}

.nfco__final-notice {
  margin-top: 18px;
}

@media (max-width: 900px) {
  .nfco__review-included {
    grid-template-columns: 1fr 1fr;
  }

  .nfco__footer {
    min-height: 92px !important;
    padding: 12px 16px !important;
  }

  .nfco__footer-inner {
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .nfco__footer-total {
    display: block !important;
  }

  .nfco__footer-sticker {
    width: 102px;
    height: 102px;
    padding: 10px 8px;
    transform: translateY(-16px);
  }

  .nfco__footer.is-final .nfco__footer-sticker {
    transform: translateY(-20px);
  }

  .nfco__footer-sticker strong {
    font-size: 24px !important;
  }

  .nfco__footer-sticker small {
    font-size: 7px;
  }

  .nfco__back,
  .nfco__primary,
  .nfco__primary--pay {
    width: auto !important;
    min-width: 0 !important;
    font-size: 9px !important;
    padding: 0 14px !important;
  }
}

@media (max-width: 640px) {
  .nfco__review-hero {
    padding: 24px 18px 20px !important;
  }

  .nfco__review-included {
    grid-template-columns: 1fr;
  }

  .nfco__footer-inner {
    grid-template-columns: 72px 1fr 1fr !important;
  }

  .nfco__footer-sticker {
    width: 88px;
    height: 88px;
  }

  .nfco__footer-sticker span {
    font-size: 7px !important;
  }

  .nfco__footer-sticker strong {
    font-size: 20px !important;
  }

  .nfco__footer-sticker small {
    display: none;
  }
}

/* =========================================================
   VERSION 0.4.0 OVERRIDES
   PARTNER-CHECK-IN LOOK / ICONS / GREEN STICKER
   ========================================================= */

.nfco {
  --nfco-green: #1fa463;
  --nfco-green-dark: #147448;
  --nfco-hover-grey: #efefed;
}

.nfco__close,
.nfco__progress button,
.nfco__tariff,
.nfco__module,
.nfco__benefit-card,
.nfco__back,
.nfco__primary,
.nfco__primary--pay {
  outline: none !important;
  box-shadow: none !important;
}

.nfco__close:hover,
.nfco__close:focus,
.nfco__close:focus-visible {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.28) !important;
}

.nfco__progress {
  gap: 8px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.nfco__progress button {
  position: relative;
  border: 0 !important;
  border-radius: 999px;
  padding: 13px 10px 14px !important;
  background: transparent !important;
  color: #7b7b7b !important;
  transition: background .18s ease, color .18s ease;
}

.nfco__progress button::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--nfco-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}

.nfco__progress button:hover,
.nfco__progress button:focus,
.nfco__progress button:focus-visible {
  background: var(--nfco-hover-grey) !important;
  color: #222 !important;
}

.nfco__progress button:hover b,
.nfco__progress button:focus b,
.nfco__progress button:focus-visible b {
  color: #444 !important;
}

.nfco__progress button.is-active {
  background: #fff !important;
  color: #111 !important;
}

.nfco__progress button.is-active::after {
  transform: scaleX(1);
}

.nfco__progress button.is-active b {
  color: var(--nfco-red) !important;
}

.nfco__tariff,
.nfco__module,
.nfco__benefit-card {
  position: relative;
  overflow: hidden;
}

.nfco__tariff::before,
.nfco__module::before,
.nfco__benefit-card::before {
  display: none !important;
}

.nfco__tariff::after,
.nfco__module::after,
.nfco__benefit-card::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--nfco-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}

.nfco__tariff:hover::after,
.nfco__tariff.is-selected::after,
.nfco__module:hover::after,
.nfco__module.is-selected::after,
.nfco__module.is-included::after,
.nfco__benefit-card:hover::after {
  transform: scaleX(1);
}

.nfco__tariff:hover,
.nfco__module:hover,
.nfco__benefit-card:hover {
  transform: translateY(-2px);
}

.nfco__module-icon,
.nfco__benefit-card i {
  display: inline-grid;
  place-items: center;
}

.nfco__module-icon {
  width: 44px !important;
  height: 44px !important;
  background: rgba(219,0,0,.06) !important;
  border: 1px solid rgba(219,0,0,.18) !important;
}

.nfco__module-icon svg,
.nfco__benefit-card i svg {
  width: 22px;
  height: 22px;
  display: block;
}

.nfco__module:hover .nfco__module-icon,
.nfco__module.is-selected .nfco__module-icon,
.nfco__module.is-included .nfco__module-icon {
  background: rgba(219,0,0,.1) !important;
  border-color: rgba(219,0,0,.35) !important;
}

.nfco__module strong {
  margin-top: 4px;
}

.nfco__review-hero {
  overflow: hidden;
  min-height: 250px;
}

.nfco__review-hero::before {
  content: 'NIPPON';
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -8px;
  font-size: clamp(96px, 18vw, 260px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  white-space: nowrap;
}

.nfco__review-hero-copy,
.nfco__review-hero-copy * {
  position: relative;
  z-index: 1;
}

.nfco__review-hero h4 {
  margin: 8px 0 14px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: .92;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #fff;
}

.nfco__review-copy {
  max-width: 860px !important;
  margin-bottom: 22px !important;
}

.nfco__review-included {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.nfco__benefit-card {
  min-height: 114px !important;
  padding: 16px 18px 20px !important;
}

.nfco__benefit-card i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(219,0,0,.14) !important;
  border: 1px solid rgba(219,0,0,.28) !important;
  color: #fff !important;
}

.nfco__benefit-card b {
  font-size: 11px !important;
  letter-spacing: .01em;
}

.nfco__benefit-card small {
  font-size: 10px !important;
}

.nfco__footer {
  overflow: visible !important;
}

.nfco__footer-inner {
  grid-template-columns: auto 1fr auto !important;
  column-gap: 24px !important;
  align-items: center !important;
}

.nfco__footer-total {
  justify-self: center !important;
}

.nfco__footer-sticker {
  width: 138px !important;
  height: 138px !important;
  background: radial-gradient(circle at 30% 30%, #29c77a 0%, var(--nfco-green) 58%, var(--nfco-green-dark) 100%) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  box-shadow: 0 18px 42px rgba(10, 62, 37, .33), 0 5px 14px rgba(0,0,0,.18) !important;
}

.nfco__footer-sticker span,
.nfco__footer-sticker small,
.nfco__footer-sticker strong,
.nfco__footer-sticker .nfco__price-symbol,
.nfco__footer-sticker .nfco__price-cents,
.nfco__footer-sticker .nfco__price-euro {
  color: #fff !important;
}

#nfco-footer-price {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-top: 5px;
}

.nfco__price-main {
  display: inline-flex;
  align-items: flex-start;
  line-height: .86;
}

.nfco__price-euro {
  font-size: 54px;
  font-weight: 900;
  letter-spacing: -.07em;
}

.nfco__price-cents {
  display: inline-block;
  margin-left: 2px;
  font-size: 23px;
  font-weight: 900;
  transform: translateY(-8px);
  letter-spacing: -.04em;
}

.nfco__price-symbol {
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  margin-top: -2px;
}

.nfco__footer-sticker span {
  font-size: 8px !important;
  letter-spacing: .13em !important;
}

.nfco__footer-sticker small {
  margin-top: 3px !important;
  font-size: 8px !important;
  opacity: .95;
}

.nfco__footer.is-final .nfco__footer-inner {
  grid-template-columns: auto 160px minmax(340px, 520px) !important;
}

.nfco__footer.is-final .nfco__footer-total {
  justify-self: center !important;
}

.nfco__footer.is-final .nfco__footer-sticker {
  width: 126px !important;
  height: 126px !important;
  transform: translateY(-18px) !important;
}

.nfco__footer.is-final .nfco__primary--pay {
  width: min(520px, 100%) !important;
  justify-self: end !important;
}

@media (max-width: 1100px) {
  .nfco__review-included {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 132px minmax(280px, 1fr) !important;
  }

  .nfco__footer.is-final .nfco__primary--pay {
    min-width: 0 !important;
    font-size: 11px !important;
    padding-inline: 20px !important;
  }
}

@media (max-width: 900px) {
  .nfco__progress {
    gap: 4px;
    padding-inline: 14px !important;
  }

  .nfco__progress button {
    padding: 11px 6px 12px !important;
  }

  .nfco__progress button::after {
    left: 8px;
    right: 8px;
  }

  .nfco__review-included {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nfco__footer-inner,
  .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 12px !important;
  }

  .nfco__footer-sticker,
  .nfco__footer.is-final .nfco__footer-sticker {
    width: 102px !important;
    height: 102px !important;
    transform: translateY(-12px) !important;
  }

  .nfco__price-euro {
    font-size: 34px;
  }

  .nfco__price-cents {
    font-size: 16px;
    transform: translateY(-4px);
  }

  .nfco__price-symbol {
    font-size: 17px;
  }

  .nfco__footer-sticker small {
    font-size: 7px !important;
  }

  .nfco__footer.is-final .nfco__primary--pay,
  .nfco__primary,
  .nfco__back {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .nfco__review-hero::before {
    font-size: 120px;
    left: 12px;
  }

  .nfco__review-included {
    grid-template-columns: 1fr !important;
  }

  .nfco__footer-sticker,
  .nfco__footer.is-final .nfco__footer-sticker {
    width: 84px !important;
    height: 84px !important;
  }

  .nfco__footer-sticker span {
    font-size: 6px !important;
  }

  .nfco__price-euro {
    font-size: 27px;
  }

  .nfco__price-cents {
    font-size: 12px;
  }

  .nfco__price-symbol {
    font-size: 14px;
  }

  .nfco__footer-sticker small {
    display: none;
  }
}

/* =========================================================
   VERSION 0.5.0 UX REFINEMENT
   ========================================================= */

#nfco {
  --nfco-stage-bg: #f4f2ef;
  --nfco-stage-line: rgba(17,17,17,.09);
  --nfco-stage-line-strong: rgba(219,0,0,.28);
  --nfco-stage-card: #ffffff;
  --nfco-stage-card-soft: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
  --nfco-stage-muted: #66625d;
  --nfco-stage-shadow: 0 12px 28px rgba(15, 15, 15, .06), 0 3px 8px rgba(15, 15, 15, .04);
  --nfco-stage-shadow-strong: 0 18px 36px rgba(219,0,0,.10), 0 10px 18px rgba(15,15,15,.05);
}

#nfco .nfco__panel {
  background: linear-gradient(180deg, #090909 0, #090909 92px, var(--nfco-stage-bg) 92px, var(--nfco-stage-bg) 100%);
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
}

#nfco .nfco__close {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
#nfco .nfco__close:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

#nfco .nfco__progress,
#nfco .nfco__body,
#nfco .nfco__footer {
  background: var(--nfco-stage-bg);
}

#nfco .nfco__progress {
  padding: 8px 42px 10px;
  border-bottom: 1px solid var(--nfco-stage-line);
}
#nfco .nfco__progress button {
  position: relative;
  color: #8a857f;
  border: 0;
  border-radius: 14px;
  padding: 12px 10px 16px;
  transition: color .18s ease, background .18s ease;
}
#nfco .nfco__progress button:hover {
  color: #212121;
  background: rgba(17,17,17,.05);
}
#nfco .nfco__progress button b { color: #b4afa9; }
#nfco .nfco__progress button.is-active {
  color: #1c1c1c;
  background: rgba(17,17,17,.035);
  border-color: transparent;
}
#nfco .nfco__progress button.is-active b { color: var(--nfco-red); }
#nfco .nfco__progress button::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219,0,0,0) 0%, rgba(219,0,0,.92) 18%, rgba(219,0,0,.92) 82%, rgba(219,0,0,0) 100%);
  transform: scaleX(.3);
  transform-origin: center;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
#nfco .nfco__progress button:hover::after,
#nfco .nfco__progress button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

#nfco .nfco__section-head,
#nfco .nfco__section-head h3,
#nfco .nfco__section-head p,
#nfco .nfco__step,
#nfco .nfco__review-card,
#nfco .nfco__fieldset legend,
#nfco .nfco__microcopy,
#nfco .nfco__module-pricebar,
#nfco .nfco__bundle-note,
#nfco .nfco__upgrade,
#nfco .nfco__date-summary,
#nfco .nfco__start-package,
#nfco .nfco__renewal-note,
#nfco .nfco__final-notice {
  color: #181818;
}
#nfco .nfco__section-head p,
#nfco .nfco__microcopy,
#nfco .nfco__start-package p,
#nfco .nfco__renewal-note p,
#nfco .nfco__bundle-note strong,
#nfco .nfco__upgrade p,
#nfco .nfco__date-summary span,
#nfco .nfco__final-notice {
  color: var(--nfco-stage-muted);
}

#nfco .nfco__tariffs {
  gap: 18px;
}
#nfco .nfco__tariff {
  min-height: 186px;
  padding: 26px 28px 22px;
  border-radius: 16px;
  border: 1px solid var(--nfco-stage-line);
  background: linear-gradient(180deg, #ffffff 0%, #fcfbfa 100%);
  color: #181818;
  box-shadow: var(--nfco-stage-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#nfco .nfco__tariff[data-tariff="PURE-FIT"] {
  background: var(--nfco-stage-card-soft);
  border-color: rgba(219,0,0,.18);
}
#nfco .nfco__tariff:hover {
  transform: translateY(-3px);
  border-color: rgba(219,0,0,.2);
  box-shadow: var(--nfco-stage-shadow-strong);
}
#nfco .nfco__tariff.is-selected {
  background: var(--nfco-stage-card-soft);
  border-color: rgba(219,0,0,.28);
  box-shadow: var(--nfco-stage-shadow-strong);
}
#nfco .nfco__tariff::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 11px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219,0,0,0) 0%, rgba(219,0,0,.92) 20%, rgba(219,0,0,.92) 80%, rgba(219,0,0,0) 100%);
  transform: scaleX(.22);
  transform-origin: center;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
#nfco .nfco__tariff:hover::after,
#nfco .nfco__tariff.is-selected::after {
  opacity: 1;
  transform: scaleX(1);
}
#nfco .nfco__tariff-name {
  font-size: 24px;
  letter-spacing: -.045em;
  color: #171717;
}
#nfco .nfco__tariff-copy {
  margin-top: 10px;
  max-width: 72%;
  color: #5c5854;
  font-size: 12px;
  line-height: 1.5;
}
#nfco .nfco__tariff strong {
  display: block;
  margin-top: auto;
  width: 100%;
}
#nfco .nfco__tariff-price {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
#nfco .nfco__tariff-price .nfco__price-shell {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  line-height: .88;
}
#nfco .nfco__tariff-price .nfco__price-main {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
}
#nfco .nfco__tariff-price .nfco__price-euro {
  font-size: 50px;
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.095em;
  color: #101010;
}
#nfco .nfco__tariff-price .nfco__price-cents {
  font-size: 19px;
  font-weight: 800;
  transform: translateY(-12px);
  color: var(--nfco-red);
}
#nfco .nfco__tariff-price .nfco__price-symbol {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: var(--nfco-red);
}
#nfco .nfco__tariff-price-note {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #67615c;
  padding-bottom: 6px;
}
#nfco .nfco__tag {
  background: #171717;
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  top: 14px;
  right: 14px;
}
#nfco .nfco__tariff[data-tariff="PURE-FIT"] .nfco__tag {
  background: linear-gradient(135deg, #db0000, #ff4b4b);
  box-shadow: 0 10px 18px rgba(219,0,0,.16);
}

#nfco .nfco__segmented {
  background: rgba(17,17,17,.045);
  border: 1px solid var(--nfco-stage-line);
}
#nfco .nfco__segmented button {
  color: #7d7772;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
#nfco .nfco__segmented button:hover {
  color: #1a1a1a;
  background: rgba(17,17,17,.04);
}
#nfco .nfco__segmented button.is-selected {
  color: #fff;
  background: #222;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 4px 10px rgba(0,0,0,.12);
}

#nfco .nfco__start-package,
#nfco .nfco__renewal-note,
#nfco .nfco__module-pricebar,
#nfco .nfco__date-summary,
#nfco .nfco__review-card,
#nfco .nfco__check,
#nfco .nfco__fields input,
#nfco .nfco__upgrade,
#nfco .nfco__bundle-note {
  border-color: var(--nfco-stage-line);
}
#nfco .nfco__start-package,
#nfco .nfco__renewal-note,
#nfco .nfco__module-pricebar,
#nfco .nfco__date-summary,
#nfco .nfco__review-card,
#nfco .nfco__upgrade,
#nfco .nfco__bundle-note,
#nfco .nfco__check {
  background: rgba(255,255,255,.76);
  box-shadow: 0 6px 18px rgba(16,16,16,.03);
}
#nfco .nfco__check span,
#nfco .nfco__check a,
#nfco .nfco__fieldset legend,
#nfco .nfco__date-summary strong,
#nfco .nfco__review-card strong,
#nfco .nfco__review-card dd,
#nfco .nfco__module-pricebar strong,
#nfco .nfco__start-package strong,
#nfco .nfco__renewal-note strong {
  color: #191919;
}
#nfco .nfco__fields input {
  background: rgba(255,255,255,.95);
  color: #161616;
}
#nfco .nfco__fields label > span { color: #4b4743; }

#nfco .nfco__modules {
  gap: 12px;
}
#nfco .nfco__module {
  position: relative;
  min-height: 128px;
  padding: 20px 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--nfco-stage-line);
  background: linear-gradient(180deg, #ffffff 0%, #fcfbfa 100%);
  color: #171717;
  box-shadow: var(--nfco-stage-shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
#nfco .nfco__module:hover {
  transform: translateY(-2px);
  border-color: rgba(219,0,0,.22);
  box-shadow: var(--nfco-stage-shadow-strong);
}
#nfco .nfco__module::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219,0,0,0) 0%, rgba(219,0,0,.92) 20%, rgba(219,0,0,.92) 80%, rgba(219,0,0,0) 100%);
  transform: scaleX(.22);
  transform-origin: center;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
#nfco .nfco__module:hover::after,
#nfco .nfco__module.is-selected::after,
#nfco .nfco__module.is-included::after {
  opacity: 1;
  transform: scaleX(1);
}
#nfco .nfco__module.is-selected,
#nfco .nfco__module.is-included {
  background: linear-gradient(180deg, #fff8f8 0%, #ffffff 100%);
  border-color: rgba(219,0,0,.24);
  box-shadow: var(--nfco-stage-shadow-strong);
}
#nfco .nfco__module.is-included {
  cursor: default;
}
#nfco .nfco__module[disabled] {
  opacity: .42;
  box-shadow: none;
}
#nfco .nfco__module.is-selected::before {
  content: '✓';
  position: absolute;
  top: 17px;
  right: 44px;
  font-size: 16px;
  font-weight: 900;
  color: var(--nfco-red);
}
#nfco .nfco__module-copy {
  display: block;
  width: 100%;
}
#nfco .nfco__module strong {
  display: block;
  max-width: 78%;
  font-size: 17px;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #111;
}
#nfco .nfco__module-state {
  display: block;
  margin-top: 8px;
  color: #66625d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#nfco .nfco__module-icon,
#nfco .nfco__benefit-card i {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#nfco .nfco__module-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #6f6a66;
}
#nfco .nfco__module-icon svg,
#nfco .nfco__benefit-card i svg {
  width: 22px;
  height: 22px;
}
#nfco .nfco__module:hover .nfco__module-icon,
#nfco .nfco__module.is-selected .nfco__module-icon,
#nfco .nfco__module.is-included .nfco__module-icon {
  color: var(--nfco-red);
}

#nfco .nfco__bundle-note {
  background: linear-gradient(120deg, rgba(219,0,0,.08), rgba(255,255,255,.9));
  border: 1px solid rgba(219,0,0,.18);
}
#nfco .nfco__upgrade {
  background: linear-gradient(180deg, #ffffff 0%, #faf9f8 100%);
}
#nfco .nfco__upgrade button,
#nfco .nfco__bundle-note button {
  background: #202020;
}
#nfco .nfco__upgrade button:hover,
#nfco .nfco__bundle-note button:hover {
  background: var(--nfco-red);
}

#nfco .nfco__review-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 24px;
  border-radius: 22px;
  background: linear-gradient(135deg, #060606 0%, #101010 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
#nfco .nfco__review-hero::before {
  content: 'NIPPON';
  position: absolute;
  left: 24px;
  bottom: -18px;
  font-size: clamp(110px, 18vw, 260px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.045);
  pointer-events: none;
}
#nfco .nfco__review-hero-copy {
  position: relative;
  z-index: 1;
}
#nfco .nfco__review-hero h4 {
  margin: 10px 0 12px;
  font-size: clamp(36px, 4vw, 60px);
  line-height: .94;
  letter-spacing: -.055em;
  color: #fff;
}
#nfco .nfco__review-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.65;
}
#nfco .nfco__review-included,
#nfco .nfco__review-upsell {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#nfco .nfco__review-included {
  margin-top: 22px;
}
#nfco .nfco__review-upsell-wrap {
  margin-top: 18px;
}
#nfco .nfco__review-card-head--inline {
  margin-bottom: 10px;
}
#nfco .nfco__benefit-card {
  position: relative;
  min-height: 112px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
#nfco .nfco__benefit-card::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219,0,0,0) 0%, rgba(219,0,0,.92) 20%, rgba(219,0,0,.92) 80%, rgba(219,0,0,0) 100%);
  transform: scaleX(.24);
  transform-origin: center;
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
#nfco .nfco__benefit-card:hover,
#nfco .nfco__benefit-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(219,0,0,.30);
  background: rgba(255,255,255,.17);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
#nfco .nfco__benefit-card:hover::after,
#nfco .nfco__benefit-card.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
#nfco .nfco__benefit-card i {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
}
#nfco .nfco__benefit-copy {
  display: block;
  max-width: 82%;
}
#nfco .nfco__benefit-card b {
  display: block;
  font-size: 15px;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
}
#nfco .nfco__benefit-card small {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.74);
  font-size: 11px;
  line-height: 1.35;
}
#nfco .nfco__benefit-card--upsell {
  appearance: none;
  text-align: left;
  cursor: pointer;
}
#nfco .nfco__benefit-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgba(219,0,0,.16);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#nfco .nfco__review-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#nfco .nfco__review-card {
  border-radius: 18px;
  background: rgba(255,255,255,.86);
}
#nfco .nfco__review-card dl div {
  border-bottom: 1px solid rgba(17,17,17,.08);
}
#nfco .nfco__review-card dt {
  color: #6c6762;
}
#nfco .nfco__review-card dd {
  color: #171717;
}
#nfco .nfco__final-notice {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,17,17,.08);
}

#nfco .nfco__footer {
  padding: 14px 28px 18px;
  border-top: 1px solid var(--nfco-stage-line);
}
#nfco .nfco__footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 22px;
  width: 100%;
}
#nfco .nfco__footer-total {
  margin-left: 0;
  text-align: center;
  justify-self: center;
}
#nfco .nfco__footer-sticker {
  width: 168px;
  height: 168px;
  padding: 16px 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(17,17,17,.04);
  box-shadow: 0 24px 44px rgba(0,0,0,.18), 0 5px 14px rgba(0,0,0,.08);
  color: #151515;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  transform: translateY(-16px);
}
#nfco .nfco__footer-sticker span {
  display: block;
  color: #6c6762;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}
#nfco .nfco__footer-sticker strong {
  display: block;
  margin-top: 8px;
  color: #141414;
}
#nfco .nfco__footer-sticker strong .nfco__price-shell {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  line-height: .82;
}
#nfco .nfco__footer-sticker strong .nfco__price-main {
  display: inline-flex;
  align-items: flex-start;
}
#nfco .nfco__footer-sticker strong .nfco__price-euro {
  font-size: 60px;
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.11em;
  color: #131313;
}
#nfco .nfco__footer-sticker strong .nfco__price-cents {
  font-size: 20px;
  font-weight: 800;
  transform: translateY(-13px);
  color: var(--nfco-red);
}
#nfco .nfco__footer-sticker strong .nfco__price-symbol {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  color: var(--nfco-red);
}
#nfco .nfco__footer-sticker small {
  display: block;
  margin-top: 5px;
  color: #76716b;
  font-size: 10px;
  line-height: 1.35;
}
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  width: 178px;
  height: 178px;
}
#nfco .nfco__back,
#nfco .nfco__primary {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.10);
  box-shadow: 0 8px 18px rgba(15,15,15,.05);
}
#nfco .nfco__back {
  background: #3b3b3b;
  color: #fff;
}
#nfco .nfco__back:hover {
  background: #202020;
}
#nfco .nfco__primary {
  margin-left: 0;
  background: #2f2f2f;
  color: #fff;
}
#nfco .nfco__primary:hover {
  background: var(--nfco-red);
  border-color: var(--nfco-red);
}
#nfco .nfco__primary--pay {
  min-width: min(100%, 440px);
  justify-self: end;
}

@media (max-width: 1180px) {
  #nfco .nfco__review-included,
  #nfco .nfco__review-upsell,
  #nfco .nfco__review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #nfco .nfco__panel {
    border-radius: 0;
    background: linear-gradient(180deg, #090909 0, #090909 92px, var(--nfco-stage-bg) 92px, var(--nfco-stage-bg) 100%);
  }
  #nfco .nfco__progress {
    padding: 8px 12px 10px;
  }
  #nfco .nfco__tariffs,
  #nfco .nfco__review-grid,
  #nfco .nfco__review-included,
  #nfco .nfco__review-upsell {
    grid-template-columns: 1fr;
  }
  #nfco .nfco__module {
    min-height: 112px;
  }
  #nfco .nfco__footer {
    padding: 12px 14px 18px;
  }
  #nfco .nfco__footer-inner {
    grid-template-columns: auto 1fr auto;
    column-gap: 12px;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 132px;
    height: 132px;
    transform: translateY(-10px);
  }
  #nfco .nfco__footer-sticker strong .nfco__price-euro {
    font-size: 42px;
  }
  #nfco .nfco__footer-sticker strong .nfco__price-cents {
    font-size: 16px;
    transform: translateY(-9px);
  }
  #nfco .nfco__footer-sticker strong .nfco__price-symbol {
    font-size: 20px;
  }
  #nfco .nfco__back,
  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    min-width: 0;
    padding: 0 16px;
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__tariff {
    min-height: 162px;
  }
  #nfco .nfco__tariff-copy {
    max-width: 100%;
  }
  #nfco .nfco__tariff-price .nfco__price-euro {
    font-size: 42px;
  }
  #nfco .nfco__tariff-price .nfco__price-cents {
    font-size: 16px;
    transform: translateY(-10px);
  }
  #nfco .nfco__module strong,
  #nfco .nfco__benefit-card b {
    max-width: 100%;
  }
  #nfco .nfco__review-hero {
    padding: 24px 18px 20px;
  }
  #nfco .nfco__review-hero::before {
    font-size: 104px;
    left: 16px;
    bottom: -4px;
  }
  #nfco .nfco__footer-inner {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  #nfco .nfco__footer-total {
    order: -1;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 124px;
    height: 124px;
    transform: translateY(0);
  }
  #nfco .nfco__back,
  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    width: 100%;
    justify-self: stretch;
  }
}

/* =========================================================
   VERSION 0.6.0 – FINAL MASTER UX REFINEMENT
   ========================================================= */

#nfco {
  --nfco-smoke: #f7f6f3;
  --nfco-ink: #111111;
  --nfco-ink-soft: #1b1b1b;
  --nfco-line-soft: rgba(17,17,17,.10);
  --nfco-card-shadow: 0 12px 28px rgba(15,15,15,.055), 0 3px 8px rgba(15,15,15,.035);
  --nfco-card-shadow-strong: 0 20px 42px rgba(0,0,0,.12), 0 7px 18px rgba(219,0,0,.06);
}

/* ---------- TARIFAUSWAHL ---------- */
#nfco .nfco__tariff,
#nfco .nfco__tariff[data-tariff="PURE-FIT"] {
  background: #fff !important;
  border: 1px solid var(--nfco-line-soft) !important;
  color: var(--nfco-ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--nfco-card-shadow) !important;
}

#nfco .nfco__tariff:hover:not(.is-selected) {
  background: #fff !important;
  border-color: rgba(219,0,0,.22) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--nfco-card-shadow-strong) !important;
}

#nfco .nfco__tariff.is-selected,
#nfco .nfco__tariff[data-tariff="PURE-FIT"].is-selected {
  background:
    radial-gradient(circle at 82% 8%, rgba(219,0,0,.18), transparent 34%),
    linear-gradient(145deg, #191919 0%, #0d0d0d 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: 0 22px 44px rgba(0,0,0,.16), 0 9px 22px rgba(219,0,0,.08) !important;
  transform: translateY(-2px);
}

#nfco .nfco__tariff.is-selected .nfco__tariff-name,
#nfco .nfco__tariff.is-selected .nfco__tariff-copy,
#nfco .nfco__tariff.is-selected .nfco__tariff-price-note,
#nfco .nfco__tariff.is-selected .nfco__price-euro {
  color: #fff !important;
}

#nfco .nfco__tariff.is-selected .nfco__tariff-copy,
#nfco .nfco__tariff.is-selected .nfco__tariff-price-note {
  color: rgba(255,255,255,.67) !important;
}

#nfco .nfco__tariff.is-selected .nfco__price-cents,
#nfco .nfco__tariff.is-selected .nfco__price-symbol {
  color: #ff3b3b !important;
}

#nfco .nfco__tariff::after {
  left: 18px !important;
  right: 18px !important;
  bottom: 9px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(219,0,0,.86) 22%, rgba(219,0,0,.86) 78%, transparent 100%) !important;
}

#nfco .nfco__tariff.is-selected::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

#nfco .nfco__tariff-price .nfco__price-euro {
  font-size: 54px !important;
}
#nfco .nfco__tariff-price .nfco__price-cents {
  font-size: 20px !important;
  transform: translateY(-13px) !important;
}
#nfco .nfco__tariff-price .nfco__price-symbol {
  font-size: 25px !important;
}

#nfco .nfco__tag {
  border-radius: 8px !important;
  background: var(--nfco-red) !important;
  color: #fff !important;
}

/* ---------- STARTPAKET / MWST ---------- */
#nfco .nfco__start-package {
  border-radius: 13px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#nfco .nfco__start-package.is-zero {
  background:
    radial-gradient(circle at 90% 0%, rgba(219,0,0,.16), transparent 34%),
    #151515 !important;
  border-color: #151515 !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.11) !important;
}
#nfco .nfco__start-package.is-zero span,
#nfco .nfco__start-package.is-zero strong,
#nfco .nfco__start-package.is-zero p {
  color: #fff !important;
}
#nfco .nfco__start-package.is-zero strong {
  color: #ff3b3b !important;
  font-size: 15px !important;
}
#nfco .nfco__start-package.is-zero p {
  color: rgba(255,255,255,.72) !important;
}
#nfco .nfco__vat-note {
  margin-top: 9px;
  color: #77716b;
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
}

/* ---------- MODULE ---------- */
#nfco .nfco__modules {
  gap: 12px !important;
}
#nfco .nfco__module {
  min-height: 148px !important;
  padding: 18px 18px 17px !important;
  border-radius: 13px !important;
  background: #fff !important;
  border: 1px solid var(--nfco-line-soft) !important;
  box-shadow: var(--nfco-card-shadow) !important;
  color: #151515 !important;
  justify-content: flex-end !important;
}
#nfco .nfco__module:hover:not(.is-selected):not(.is-included):not([disabled]) {
  background: #fff !important;
  border-color: rgba(219,0,0,.20) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--nfco-card-shadow-strong) !important;
}
#nfco .nfco__module.is-selected,
#nfco .nfco__module.is-included {
  background:
    radial-gradient(circle at 88% 10%, rgba(219,0,0,.14), transparent 30%),
    linear-gradient(145deg, #1a1a1a 0%, #101010 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.14), 0 5px 14px rgba(219,0,0,.07) !important;
  color: #fff !important;
}
#nfco .nfco__module::after {
  left: 16px !important;
  right: 16px !important;
  top: auto !important;
  bottom: 9px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(219,0,0,.88) 22%, rgba(219,0,0,.88) 78%, transparent 100%) !important;
}
#nfco .nfco__module.is-selected::after,
#nfco .nfco__module.is-included::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}
#nfco .nfco__module strong {
  max-width: 80% !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
  color: #151515 !important;
}
#nfco .nfco__module.is-selected strong,
#nfco .nfco__module.is-included strong {
  color: #fff !important;
}
#nfco .nfco__module-desc {
  display: block;
  max-width: 88%;
  margin-top: 7px;
  color: #69635d;
  font-size: 9.5px;
  line-height: 1.35;
  font-weight: 600;
}
#nfco .nfco__module.is-selected .nfco__module-desc,
#nfco .nfco__module.is-included .nfco__module-desc {
  color: rgba(255,255,255,.65) !important;
}
#nfco .nfco__module-state {
  margin-top: 9px !important;
  color: #756f69 !important;
}
#nfco .nfco__module.is-selected .nfco__module-state,
#nfco .nfco__module.is-included .nfco__module-state {
  color: #ff4a4a !important;
}
#nfco .nfco__module-icon {
  top: 16px !important;
  right: 16px !important;
  color: #5d5853 !important;
}
#nfco .nfco__module.is-selected .nfco__module-icon,
#nfco .nfco__module.is-included .nfco__module-icon {
  color: #fff !important;
}
#nfco .nfco__module.is-selected::before {
  top: 15px !important;
  right: 48px !important;
  color: #ff3c3c !important;
}

/* ---------- FINALER CHECK: 3 PRÜFKARTEN ---------- */
#nfco .nfco__review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
#nfco .nfco__review-card--payment {
  grid-column: auto !important;
}
#nfco .nfco__review-card {
  border-radius: 14px !important;
  background: rgba(255,255,255,.94) !important;
}
#nfco .nfco__review-card dl div {
  grid-template-columns: minmax(88px, .8fr) minmax(0, 1.2fr) !important;
  gap: 10px !important;
}

/* ---------- FINALER CHECK: LEISTUNGEN / UPSSELL ---------- */
#nfco .nfco__review-included,
#nfco .nfco__review-upsell {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#nfco .nfco__benefit-card {
  min-height: 126px !important;
  border-radius: 13px !important;
  overflow: hidden;
}
#nfco .nfco__benefit-card.is-active {
  background:
    radial-gradient(circle at 90% 4%, rgba(219,0,0,.16), transparent 32%),
    linear-gradient(145deg, #202020 0%, #111 100%) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 13px 28px rgba(0,0,0,.18) !important;
  color: #fff !important;
}
#nfco .nfco__benefit-card.is-active::before {
  display: block !important;
  content: 'NF';
  position: absolute;
  right: -4px;
  bottom: -18px;
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.09em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}
#nfco .nfco__benefit-card.is-active::after,
#nfco .nfco__benefit-card--upsell::after {
  left: 16px !important;
  right: 16px !important;
  bottom: 9px !important;
  height: 1px !important;
}
#nfco .nfco__benefit-card.is-active::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}
#nfco .nfco__benefit-card.is-active i {
  color: #fff !important;
}
#nfco .nfco__benefit-card.is-removable {
  appearance: none;
  text-align: left;
  cursor: pointer;
}
#nfco .nfco__benefit-card.is-removable:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,.42) !important;
}
#nfco .nfco__benefit-action--remove {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.78) !important;
}

#nfco .nfco__benefit-card--upsell {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #161616 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}
#nfco .nfco__benefit-card--upsell b {
  color: #161616 !important;
}
#nfco .nfco__benefit-card--upsell small {
  color: #625d58 !important;
}
#nfco .nfco__benefit-card--upsell i {
  color: #6d6761 !important;
}
#nfco .nfco__benefit-card--upsell:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(219,0,0,.24) !important;
  box-shadow: 0 14px 26px rgba(0,0,0,.12) !important;
}
#nfco .nfco__benefit-card--upsell:hover::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}
#nfco .nfco__benefit-action {
  border-radius: 7px !important;
  background: rgba(219,0,0,.10) !important;
  color: var(--nfco-red) !important;
}

/* ---------- PREIS-STICKER: CI STATT GRÜN ---------- */
#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  width: 178px !important;
  height: 178px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 33% 24%, #ffffff 0%, #faf9f6 62%, #efede9 100%) !important;
  border: 1px solid rgba(17,17,17,.08) !important;
  box-shadow:
    0 26px 50px rgba(0,0,0,.19),
    0 8px 18px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  color: #111 !important;
  transform: translateY(-16px) !important;
  position: relative;
}
#nfco .nfco__footer-sticker::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background: var(--nfco-red);
  transform: translateX(-50%);
}
#nfco .nfco__footer-sticker span,
#nfco .nfco__footer-sticker small {
  color: #6e6862 !important;
}
#nfco .nfco__footer-sticker strong,
#nfco .nfco__footer-sticker .nfco__price-euro {
  color: #111 !important;
}
#nfco .nfco__footer-sticker .nfco__price-cents,
#nfco .nfco__footer-sticker .nfco__price-symbol {
  color: var(--nfco-red) !important;
}
#nfco .nfco__footer-sticker .nfco__price-euro {
  font-size: 62px !important;
}
#nfco .nfco__footer-sticker .nfco__price-cents {
  font-size: 21px !important;
  transform: translateY(-14px) !important;
}
#nfco .nfco__footer-sticker .nfco__price-symbol {
  font-size: 29px !important;
}
#nfco .nfco__footer-sticker small {
  max-width: 122px;
  font-size: 8px !important;
  line-height: 1.35;
}

/* ---------- BOT-HONEYPOTS ---------- */
#nfco .nfco__hp {
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #nfco .nfco__review-card--payment {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__tariff-price .nfco__price-euro { font-size: 48px !important; }
  #nfco .nfco__module { min-height: 132px !important; }
  #nfco .nfco__review-included,
  #nfco .nfco__review-upsell,
  #nfco .nfco__review-grid {
    grid-template-columns: 1fr !important;
  }
  #nfco .nfco__review-card--payment { grid-column: auto !important; }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 140px !important;
    height: 140px !important;
    transform: translateY(-9px) !important;
  }
  #nfco .nfco__footer-sticker .nfco__price-euro { font-size: 46px !important; }
  #nfco .nfco__footer-sticker .nfco__price-cents { font-size: 16px !important; transform: translateY(-10px) !important; }
  #nfco .nfco__footer-sticker .nfco__price-symbol { font-size: 21px !important; }
}

@media (max-width: 640px) {
  #nfco .nfco__vat-note { text-align: left; }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 126px !important;
    height: 126px !important;
    transform: none !important;
  }
  #nfco .nfco__footer-sticker .nfco__price-euro { font-size: 40px !important; }
  #nfco .nfco__footer-sticker small { font-size: 7px !important; }
}

/* =========================================================
   VERSION 0.7.0 – VISUAL POLISH / FINAL MASTER REFINEMENT
   ========================================================= */

/* ---------- PANEL / HEADER ---------- */
#nfco .nfco__panel {
  border: 0 !important;
  outline: 0 !important;
  background: #f5f3f0 !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.34) !important;
  overflow: hidden !important;
}

#nfco .nfco__header {
  position: relative;
  min-height: 118px;
  padding: 28px 82px 22px 42px !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(219,0,0,.14), transparent 34%),
    linear-gradient(135deg, #050505 0%, #101010 62%, #0a0a0a 100%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden;
}

#nfco .nfco__header::after {
  content: 'CHECKOUT';
  position: absolute;
  right: 86px;
  bottom: -12px;
  font-size: clamp(48px, 6vw, 94px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.07em;
  color: rgba(255,255,255,.025);
  pointer-events: none;
  white-space: nowrap;
}

#nfco .nfco__header > div {
  position: relative;
  z-index: 1;
}

#nfco .nfco__header h2 {
  color: #f5f5f3 !important;
  font-size: clamp(34px, 3.2vw, 56px) !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.02);
}

#nfco .nfco__header .nfco__eyebrow {
  color: #ff2a2a !important;
}

#nfco .nfco__close {
  top: 18px !important;
  right: 18px !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

#nfco .nfco__close:hover,
#nfco .nfco__close:focus-visible {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.20) !important;
}

#nfco .nfco__close span {
  left: 10px !important;
  top: 16px !important;
  width: 14px !important;
  height: 1.5px !important;
}

/* ---------- REVIEW: ALTE PILL-VERERBUNG NEUTRALISIEREN ---------- */
#nfco .nfco__review-included .nfco__benefit-card,
#nfco .nfco__review-included .nfco__benefit-card span,
#nfco .nfco__review-upsell .nfco__benefit-card,
#nfco .nfco__review-upsell .nfco__benefit-card span {
  min-height: 0;
}

#nfco .nfco__review-included .nfco__benefit-card > span,
#nfco .nfco__review-included .nfco__benefit-copy,
#nfco .nfco__review-included .nfco__benefit-copy > span,
#nfco .nfco__review-upsell .nfco__benefit-card > span,
#nfco .nfco__review-upsell .nfco__benefit-copy,
#nfco .nfco__review-upsell .nfco__benefit-copy > span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------- FINALER DARK-BLOCK ---------- */
#nfco .nfco__review-hero {
  background:
    radial-gradient(circle at 88% 8%, rgba(219,0,0,.11), transparent 31%),
    linear-gradient(145deg, #080808 0%, #111111 100%) !important;
  border: 0 !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.20) !important;
}

#nfco .nfco__review-hero::before {
  left: 14px !important;
  bottom: -30px !important;
  font-size: clamp(130px, 19vw, 280px) !important;
  color: rgba(255,255,255,.038) !important;
}

#nfco .nfco__review-hero h4 {
  font-size: clamp(46px, 5vw, 74px) !important;
  margin-bottom: 12px !important;
}

/* ---------- AUSGEWÄHLTE LEISTUNGEN ---------- */
#nfco .nfco__benefit-card.is-active {
  min-height: 132px !important;
  padding: 18px 18px 42px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 90% 4%, rgba(219,0,0,.18), transparent 34%),
    linear-gradient(145deg, rgba(37,37,37,.98) 0%, rgba(18,18,18,.98) 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.16) !important;
}

#nfco .nfco__benefit-card.is-active:hover {
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 32px rgba(0,0,0,.21) !important;
}

#nfco .nfco__benefit-card.is-active::after {
  height: 1px !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 9px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(219,0,0,.72) 22%, rgba(219,0,0,.72) 78%, transparent 100%) !important;
}

#nfco .nfco__benefit-card.is-active .nfco__benefit-copy {
  max-width: 82% !important;
  display: block !important;
}

#nfco .nfco__benefit-card.is-active b {
  font-size: 15px !important;
}

#nfco .nfco__benefit-card.is-active small {
  margin-top: 7px !important;
  font-size: 10.5px !important;
  line-height: 1.38 !important;
  color: rgba(255,255,255,.68) !important;
}

#nfco .nfco__benefit-card.is-active i {
  top: 16px !important;
  right: 16px !important;
  width: 24px !important;
  height: 24px !important;
  color: #fff !important;
  opacity: .92;
}

/* Minus rechts unten, erweitert sich bei Hover zu "ENTFERNEN" */
#nfco .nfco__remove-control {
  position: absolute !important;
  right: 14px !important;
  bottom: 16px !important;
  z-index: 4;
  width: 30px;
  height: 28px;
  min-height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.86) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  transition: width .22s ease, background .22s ease, border-color .22s ease !important;
}

#nfco .nfco__remove-symbol {
  flex: 0 0 28px;
  width: 28px;
  height: 26px;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

#nfco .nfco__remove-label {
  display: block !important;
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  transition: width .22s ease, max-width .22s ease, opacity .16s ease, padding .22s ease !important;
}

#nfco .nfco__benefit-card.is-removable:hover .nfco__remove-control,
#nfco .nfco__remove-control:hover {
  width: 102px;
  background: rgba(219,0,0,.86) !important;
  border-color: rgba(219,0,0,.96) !important;
}

#nfco .nfco__benefit-card.is-removable:hover .nfco__remove-label,
#nfco .nfco__remove-control:hover .nfco__remove-label {
  width: 66px;
  max-width: 66px;
  opacity: 1;
  padding-left: 8px !important;
}

/* ---------- OPTIONALE UPGRADES: TRANSPARENT ---------- */
#nfco .nfco__review-upsell-wrap {
  position: relative;
  z-index: 2;
  margin-top: 24px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.16);
}

#nfco .nfco__benefit-card--upsell {
  min-height: 118px !important;
  padding: 18px 18px 38px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: none !important;
  color: #fff !important;
  backdrop-filter: blur(1.5px);
}

#nfco .nfco__benefit-card--upsell b {
  color: #fff !important;
  font-size: 14px !important;
}

#nfco .nfco__benefit-card--upsell small {
  color: rgba(255,255,255,.62) !important;
  font-size: 10px !important;
}

#nfco .nfco__benefit-card--upsell i {
  color: rgba(255,255,255,.76) !important;
}

#nfco .nfco__benefit-card--upsell:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(219,0,0,.44) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.10) !important;
}

#nfco .nfco__benefit-card--upsell::after {
  height: 1px !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 9px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(219,0,0,.78) 22%, rgba(219,0,0,.78) 78%, transparent 100%) !important;
}

#nfco .nfco__benefit-card--upsell .nfco__benefit-action {
  position: absolute;
  left: 18px;
  bottom: 15px;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 7px !important;
  background: rgba(219,0,0,.16) !important;
  color: #ff7373 !important;
  font-size: 8px !important;
}

/* ---------- PREIS-STICKER: NEU AUSBALANCIERT ---------- */
#nfco .nfco__footer {
  min-height: 118px !important;
  overflow: visible !important;
}

#nfco .nfco__footer-inner {
  position: relative;
  min-height: 88px;
  width: 100%;
  grid-template-columns: auto 1fr auto !important;
  column-gap: 26px !important;
  align-items: center !important;
}

#nfco .nfco__footer-total {
  justify-self: center !important;
  transform: translateX(34px);
}

#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  width: 196px !important;
  height: 196px !important;
  padding: 24px 16px 17px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 26%, #ffffff 0%, #faf9f6 58%, #ebe8e3 100%) !important;
  border: 1px solid rgba(17,17,17,.055) !important;
  box-shadow:
    0 30px 56px rgba(0,0,0,.22),
    0 10px 22px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  transform: translateY(-34px) !important;
  overflow: visible;
}

#nfco .nfco__footer-sticker::before {
  top: 16px !important;
  width: 44px !important;
  height: 2px !important;
  opacity: .88;
}

#nfco .nfco__footer-sticker > span {
  margin-top: 4px;
  font-size: 8px !important;
  line-height: 1.25 !important;
  letter-spacing: .14em !important;
  color: #706b65 !important;
}

#nfco .nfco__footer-sticker strong {
  margin-top: 12px !important;
  display: block !important;
  width: 100%;
  text-align: center;
}

#nfco .nfco__footer-sticker strong .nfco__price-shell {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap;
  line-height: 1 !important;
}

#nfco .nfco__footer-sticker strong .nfco__price-main {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 1px !important;
  line-height: .82 !important;
}

#nfco .nfco__footer-sticker .nfco__price-euro {
  font-size: 68px !important;
  line-height: .78 !important;
  letter-spacing: -.055em !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}

#nfco .nfco__footer-sticker .nfco__price-cents {
  margin-left: 2px !important;
  font-size: 19px !important;
  line-height: 1 !important;
  transform: translateY(-5px) !important;
  letter-spacing: -.02em !important;
  font-weight: 900 !important;
}

#nfco .nfco__footer-sticker .nfco__price-symbol {
  margin-left: 0 !important;
  margin-bottom: 2px !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#nfco .nfco__footer-sticker small {
  margin: 8px auto 0 !important;
  max-width: 138px !important;
  color: #6c6761 !important;
  font-size: 7.5px !important;
  line-height: 1.35 !important;
}

#nfco .nfco__footer.is-final .nfco__footer-inner {
  grid-template-columns: auto minmax(200px, 1fr) minmax(360px, 520px) !important;
}

#nfco .nfco__footer.is-final .nfco__footer-total {
  justify-self: center !important;
  transform: translateX(12px);
}

#nfco .nfco__footer.is-final .nfco__primary--pay {
  justify-self: end !important;
  width: min(100%, 520px) !important;
}

/* ---------- RESPONSIVE ABSICHERUNG ---------- */
@media (max-width: 1180px) {
  #nfco .nfco__header {
    min-height: 106px;
    padding: 24px 70px 20px 32px !important;
  }

  #nfco .nfco__review-included,
  #nfco .nfco__review-upsell {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #nfco .nfco__review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #nfco .nfco__review-card--payment {
    grid-column: 1 / -1 !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 164px minmax(310px, 1fr) !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 166px !important;
    height: 166px !important;
    transform: translateY(-26px) !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 56px !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__panel {
    inset: 0 !important;
    border-radius: 0 !important;
  }

  #nfco .nfco__header {
    min-height: 96px;
    padding: 21px 58px 17px 20px !important;
  }

  #nfco .nfco__header::after {
    right: 52px;
    font-size: 58px;
  }

  #nfco .nfco__modules {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  #nfco .nfco__review-included,
  #nfco .nfco__review-upsell,
  #nfco .nfco__review-grid {
    grid-template-columns: 1fr !important;
  }

  #nfco .nfco__review-card--payment {
    grid-column: auto !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 105px !important;
    padding: 12px 14px 16px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 132px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    display: block !important;
    transform: none !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 132px !important;
    height: 132px !important;
    padding: 18px 10px 12px !important;
    transform: translateY(-14px) !important;
  }

  #nfco .nfco__footer-sticker::before {
    top: 10px !important;
    width: 32px !important;
  }

  #nfco .nfco__footer-sticker > span {
    font-size: 6.5px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 42px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-cents {
    font-size: 13px !important;
    transform: translateY(-3px) !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-symbol {
    font-size: 18px !important;
  }

  #nfco .nfco__footer-sticker small {
    font-size: 6px !important;
    max-width: 94px !important;
  }

  #nfco .nfco__primary--pay {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 15px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__header h2 {
    font-size: 31px !important;
  }

  #nfco .nfco__header::after {
    display: none;
  }

  #nfco .nfco__modules {
    grid-template-columns: 1fr !important;
  }

  #nfco .nfco__review-hero {
    padding: 24px 16px 20px !important;
  }

  #nfco .nfco__review-hero h4 {
    font-size: 42px !important;
  }

  #nfco .nfco__benefit-card.is-active,
  #nfco .nfco__benefit-card--upsell {
    min-height: 116px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 0 !important;
    padding: 12px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action';
    row-gap: 10px !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__back {
    grid-area: back;
    width: 100% !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    grid-area: price;
    justify-self: center !important;
  }

  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    grid-area: action;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 126px !important;
    height: 126px !important;
    transform: none !important;
  }

  #nfco .nfco__remove-control {
    width: 30px !important;
  }

  #nfco .nfco__benefit-card.is-removable:hover .nfco__remove-control,
  #nfco .nfco__remove-control:hover {
    width: 30px !important;
  }

  #nfco .nfco__remove-label {
    display: none !important;
  }
}

/* =========================================================
   VERSION 0.7.1 – FINAL UX POLISH
   Preis-Medallion / Add-Control / Layering
   ========================================================= */

/* Scrollender Inhalt bleibt zuverlässig unter dem Footer/Medallion. */
#nfco .nfco__body {
  position: relative !important;
  z-index: 1 !important;
}

#nfco .nfco__footer {
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate;
  box-shadow: 0 -14px 34px rgba(255,255,255,.98), 0 -1px 0 rgba(17,17,17,.06) !important;
}

#nfco .nfco__footer-inner {
  position: relative !important;
  z-index: 42 !important;
}

#nfco .nfco__footer-total {
  position: relative !important;
  z-index: 60 !important;
}

/* ---------- PREIS-MEDAILLON ---------- */
#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  position: relative !important;
  z-index: 62 !important;
  width: 212px !important;
  height: 212px !important;
  padding: 29px 20px 20px !important;
  background:
    radial-gradient(circle at 32% 22%, #ffffff 0%, #fbfaf7 56%, #efede8 100%) !important;
  border: 1px solid rgba(18,18,18,.055) !important;
  box-shadow:
    0 32px 70px rgba(0,0,0,.22),
    0 14px 28px rgba(0,0,0,.11),
    0 3px 8px rgba(219,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translate(-34px, -40px) rotate(-1.4deg) !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease !important;
}

#nfco .nfco__footer-sticker:hover {
  transform: translate(-34px, -43px) rotate(0deg) scale(1.018) !important;
  box-shadow:
    0 38px 78px rgba(0,0,0,.24),
    0 15px 30px rgba(0,0,0,.12),
    0 4px 10px rgba(219,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

#nfco .nfco__footer-sticker::before {
  content: '' !important;
  position: absolute !important;
  top: 18px !important;
  left: 50% !important;
  width: 42px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--nfco-red) !important;
  transform: translateX(-50%) !important;
  opacity: .92 !important;
}

#nfco .nfco__footer-sticker::after {
  content: '' !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(17,17,17,.045) !important;
  pointer-events: none !important;
}

#nfco .nfco__footer-sticker > span {
  margin-top: 2px !important;
  max-width: 145px;
  text-align: center;
  color: #6c6761 !important;
  font-size: 8.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .135em !important;
}

#nfco .nfco__footer-sticker strong {
  margin: 12px 0 0 !important;
  width: auto !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* 81 groß links; ,90 und € bilden rechts eine kompakte Spalte. */
#nfco .nfco__footer-sticker strong .nfco__price-shell {
  display: grid !important;
  grid-template-columns: auto 31px !important;
  grid-template-rows: 30px 33px !important;
  column-gap: 5px !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#nfco .nfco__footer-sticker strong .nfco__price-main {
  display: contents !important;
}

#nfco .nfco__footer-sticker .nfco__price-euro {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  color: #111 !important;
  font-size: 76px !important;
  line-height: .82 !important;
  font-weight: 900 !important;
  letter-spacing: -.075em !important;
  font-variant-numeric: proportional-nums !important;
}

#nfco .nfco__footer-sticker .nfco__price-cents {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  margin: 0 !important;
  color: var(--nfco-red) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  transform: none !important;
}

#nfco .nfco__footer-sticker .nfco__price-symbol {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 2px 0 0 !important;
  color: #171717 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#nfco .nfco__footer-sticker small {
  margin: 10px auto 0 !important;
  max-width: 145px !important;
  color: #716c66 !important;
  font-size: 7.5px !important;
  line-height: 1.35 !important;
}

/* Finalseite: Medallion bleibt vor dem scrollenden Review und bekommt Luft zum CTA. */
#nfco .nfco__footer.is-final .nfco__footer-inner {
  grid-template-columns: auto minmax(225px, .8fr) minmax(390px, 520px) !important;
  column-gap: 34px !important;
}

#nfco .nfco__footer.is-final .nfco__footer-total {
  justify-self: center !important;
  transform: none !important;
}

#nfco .nfco__footer.is-final .nfco__primary--pay {
  position: relative !important;
  z-index: 50 !important;
  justify-self: end !important;
}

/* ---------- AUSGEWÄHLT: Minus nur am Control aufklappen ---------- */
#nfco .nfco__benefit-card.is-removable {
  padding: 18px 54px 48px 18px !important;
}

#nfco .nfco__benefit-card.is-removable:hover .nfco__remove-control {
  width: 30px !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
}

#nfco .nfco__benefit-card.is-removable:hover .nfco__remove-label {
  width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  padding-left: 0 !important;
}

#nfco .nfco__remove-control:hover,
#nfco .nfco__remove-control:focus-visible {
  width: 106px !important;
  background: rgba(219,0,0,.90) !important;
  border-color: rgba(219,0,0,.98) !important;
}

#nfco .nfco__remove-control:hover .nfco__remove-label,
#nfco .nfco__remove-control:focus-visible .nfco__remove-label {
  width: 70px !important;
  max-width: 70px !important;
  opacity: 1 !important;
  padding-left: 8px !important;
}

/* ---------- OPTIONAL: Plus mit identischer Micro-Interaction ---------- */
#nfco .nfco__benefit-card--upsell {
  padding: 18px 54px 48px 18px !important;
}

#nfco .nfco__add-control {
  position: absolute !important;
  right: 14px !important;
  bottom: 16px !important;
  z-index: 5 !important;
  width: 30px;
  height: 28px;
  min-height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.90) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  transition: width .22s cubic-bezier(.2,.8,.2,1), background .22s ease, border-color .22s ease !important;
}

#nfco .nfco__add-symbol {
  flex: 0 0 28px;
  width: 28px;
  height: 26px;
  display: grid !important;
  place-items: center;
  color: #fff !important;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

#nfco .nfco__add-label {
  display: block !important;
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 !important;
  color: #fff !important;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .075em;
  transition: width .22s cubic-bezier(.2,.8,.2,1), max-width .22s ease, opacity .14s ease, padding .22s ease !important;
}

#nfco .nfco__add-control:hover,
#nfco .nfco__add-control:focus-visible {
  width: 112px !important;
  background: rgba(219,0,0,.90) !important;
  border-color: rgba(219,0,0,.98) !important;
}

#nfco .nfco__add-control:hover .nfco__add-label,
#nfco .nfco__add-control:focus-visible .nfco__add-label {
  width: 76px !important;
  max-width: 76px !important;
  opacity: 1 !important;
  padding-left: 8px !important;
}

/* Der alte Text-CTA aus früheren Versionen ist im V0.7.1-Markup nicht mehr nötig. */
#nfco .nfco__benefit-card--upsell .nfco__benefit-action {
  display: none !important;
}

/* Dezente Bewegung beim Neuaufbau der finalen Karten. */
@keyframes nfcoReviewCardIn {
  0% { opacity: 0; transform: translateY(7px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

#nfco .nfco__review-included .nfco__benefit-card,
#nfco .nfco__review-upsell .nfco__benefit-card {
  animation: nfcoReviewCardIn .24s cubic-bezier(.2,.75,.25,1) both;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 176px !important;
    height: 176px !important;
    padding: 24px 14px 16px !important;
    transform: translate(-16px, -31px) rotate(-1deg) !important;
  }
  #nfco .nfco__footer-sticker:hover {
    transform: translate(-16px, -33px) rotate(0deg) scale(1.012) !important;
  }
  #nfco .nfco__footer-sticker strong .nfco__price-shell {
    grid-template-columns: auto 27px !important;
    grid-template-rows: 25px 27px !important;
  }
  #nfco .nfco__footer-sticker .nfco__price-euro { font-size: 61px !important; }
  #nfco .nfco__footer-sticker .nfco__price-cents { font-size: 17px !important; }
  #nfco .nfco__footer-sticker .nfco__price-symbol { font-size: 21px !important; }
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 180px minmax(310px, 1fr) !important;
    column-gap: 18px !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 140px !important;
    height: 140px !important;
    padding: 19px 10px 12px !important;
    transform: translate(0, -18px) rotate(0deg) !important;
  }
  #nfco .nfco__footer-sticker:hover {
    transform: translate(0, -19px) scale(1.01) !important;
  }
  #nfco .nfco__footer-sticker strong .nfco__price-shell {
    grid-template-columns: auto 22px !important;
    grid-template-rows: 20px 22px !important;
    column-gap: 3px !important;
  }
  #nfco .nfco__footer-sticker .nfco__price-euro { font-size: 48px !important; }
  #nfco .nfco__footer-sticker .nfco__price-cents { font-size: 14px !important; }
  #nfco .nfco__footer-sticker .nfco__price-symbol { font-size: 17px !important; }
  #nfco .nfco__footer-sticker > span { font-size: 6.5px !important; }
  #nfco .nfco__footer-sticker small { font-size: 6px !important; max-width: 100px !important; }
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: auto 140px minmax(0,1fr) !important;
    column-gap: 10px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__footer {
    z-index: 40 !important;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 132px !important;
    height: 132px !important;
    transform: none !important;
  }
  #nfco .nfco__footer-sticker:hover {
    transform: none !important;
  }
  #nfco .nfco__remove-control,
  #nfco .nfco__add-control,
  #nfco .nfco__remove-control:hover,
  #nfco .nfco__add-control:hover,
  #nfco .nfco__remove-control:focus-visible,
  #nfco .nfco__add-control:focus-visible {
    width: 32px !important;
  }
  #nfco .nfco__remove-label,
  #nfco .nfco__add-label,
  #nfco .nfco__remove-control:hover .nfco__remove-label,
  #nfco .nfco__add-control:hover .nfco__add-label,
  #nfco .nfco__remove-control:focus-visible .nfco__remove-label,
  #nfco .nfco__add-control:focus-visible .nfco__add-label {
    display: none !important;
  }
  #nfco .nfco__benefit-card.is-removable,
  #nfco .nfco__benefit-card--upsell {
    padding-right: 54px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nfco .nfco__review-included .nfco__benefit-card,
  #nfco .nfco__review-upsell .nfco__benefit-card {
    animation: none !important;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__add-control,
  #nfco .nfco__remove-control {
    transition: none !important;
  }
}

/* =========================================================
   VERSION 0.7.2 – FINAL CONVERSION STRIPE / CLOSE ALIGNMENT
   ========================================================= */

/* ---------- CLOSE: X EXAKT IM KREIS ZENTRIEREN ---------- */
#nfco .nfco__close {
  display: grid !important;
  place-items: center !important;
}

#nfco .nfco__close span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 14px !important;
  height: 1.5px !important;
  margin: 0 !important;
  transform-origin: 50% 50% !important;
  border-radius: 999px !important;
}

#nfco .nfco__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

#nfco .nfco__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* ---------- FINALER WEISSER STRIPE: ABSCHLUSSZONE ---------- */
#nfco .nfco__footer.is-final {
  position: relative !important;
  min-height: 194px !important;
  padding: 30px 34px 26px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 80% 44%, rgba(219,0,0,.055) 0%, rgba(219,0,0,0) 31%),
    radial-gradient(circle at 42% 20%, rgba(17,17,17,.025) 0%, rgba(17,17,17,0) 34%),
    linear-gradient(180deg, #fffefd 0%, #f7f5f1 100%) !important;
  border-top: 1px solid rgba(17,17,17,.07) !important;
  box-shadow:
    0 -20px 44px rgba(255,255,255,.98),
    0 -1px 0 rgba(17,17,17,.055),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Sehr leises typografisches Fundament – motiviert, ohne zu konkurrieren. */
#nfco .nfco__footer.is-final::before {
  content: 'DEIN START.';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  z-index: 0;
  color: rgba(17,17,17,.032);
  font-size: clamp(66px, 7.6vw, 122px);
  line-height: .84;
  font-weight: 900;
  letter-spacing: -.075em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

#nfco .nfco__footer.is-final::after {
  content: 'ONLINE-ABSCHLUSS · 2 WOCHEN ONLINE-BONUS · INKL. MWST.';
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: rgba(17,17,17,.39);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .135em;
  white-space: nowrap;
  pointer-events: none;
}

#nfco .nfco__footer.is-final .nfco__footer-inner {
  position: relative !important;
  z-index: 5 !important;
  min-height: 134px !important;
  align-items: center !important;
  grid-template-columns: minmax(122px, .72fr) minmax(238px, .88fr) minmax(400px, 520px) !important;
  column-gap: 36px !important;
}

/* Preis bleibt die emotionale Mitte und darf bewusst in den Content hineinragen. */
#nfco .nfco__footer.is-final .nfco__footer-total {
  justify-self: center !important;
  align-self: center !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker {
  transform: translate(-22px, -38px) rotate(-1deg) !important;
  box-shadow:
    0 34px 74px rgba(0,0,0,.22),
    0 14px 28px rgba(0,0,0,.105),
    0 3px 12px rgba(219,0,0,.07),
    inset 0 1px 0 #fff !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translate(-22px, -41px) rotate(0deg) scale(1.018) !important;
}

/* Zurück bewusst sekundär. */
#nfco .nfco__footer.is-final .nfco__back {
  justify-self: start !important;
  background: #363636 !important;
  border-color: rgba(17,17,17,.06) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.075) !important;
  opacity: .92;
  transition: transform .2s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease !important;
}

#nfco .nfco__footer.is-final .nfco__back:hover {
  background: #202020 !important;
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

/* Abschluss-CTA: hochwertiger Lift statt zusätzlicher visueller Lautstärke. */
#nfco .nfco__footer.is-final .nfco__primary--pay {
  position: relative !important;
  z-index: 8 !important;
  overflow: hidden !important;
  min-height: 56px !important;
  padding-inline: 30px !important;
  background: linear-gradient(135deg, #e00000 0%, #c70000 100%) !important;
  border: 1px solid rgba(145,0,0,.20) !important;
  box-shadow:
    0 16px 34px rgba(219,0,0,.20),
    0 4px 10px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

#nfco .nfco__footer.is-final .nfco__primary--pay::after {
  content: '';
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: -34%;
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition: left .42s cubic-bezier(.2,.75,.25,1), opacity .18s ease;
}

#nfco .nfco__footer.is-final .nfco__primary--pay:hover,
#nfco .nfco__footer.is-final .nfco__primary--pay:focus-visible {
  transform: translateY(-2px) !important;
  filter: saturate(1.04);
  box-shadow:
    0 20px 42px rgba(219,0,0,.25),
    0 6px 14px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

#nfco .nfco__footer.is-final .nfco__primary--pay:hover::after,
#nfco .nfco__footer.is-final .nfco__primary--pay:focus-visible::after {
  left: 118%;
  opacity: 1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  #nfco .nfco__footer.is-final {
    min-height: 180px !important;
    padding-inline: 24px !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: 116px 188px minmax(310px, 1fr) !important;
    column-gap: 18px !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    transform: translate(-10px, -29px) rotate(-.7deg) !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(-10px, -31px) rotate(0deg) scale(1.012) !important;
  }

  #nfco .nfco__footer.is-final::before {
    font-size: clamp(58px, 7vw, 96px);
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer.is-final {
    min-height: 156px !important;
    padding: 26px 16px 18px !important;
  }

  #nfco .nfco__footer.is-final::after {
    top: 13px;
    font-size: 6.7px;
    letter-spacing: .09em;
  }

  #nfco .nfco__footer.is-final::before {
    bottom: -8px;
    font-size: 64px;
  }

  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 112px !important;
    grid-template-columns: 96px 138px minmax(0,1fr) !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    transform: translate(0, -18px) rotate(0deg) !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(0, -19px) scale(1.01) !important;
  }

  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-height: 52px !important;
    padding-inline: 18px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__footer.is-final {
    min-height: auto !important;
    padding: 16px 14px 18px !important;
  }

  #nfco .nfco__footer.is-final::before,
  #nfco .nfco__footer.is-final::after {
    display: none !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    row-gap: 11px !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-total {
    order: -2;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: none !important;
  }

  #nfco .nfco__footer.is-final .nfco__back,
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    width: 100% !important;
    justify-self: stretch !important;
  }

  #nfco .nfco__footer.is-final .nfco__back {
    order: 2;
  }

  #nfco .nfco__footer.is-final .nfco__primary--pay {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nfco .nfco__footer.is-final .nfco__primary--pay,
  #nfco .nfco__footer.is-final .nfco__primary--pay::after,
  #nfco .nfco__footer.is-final .nfco__back {
    transition: none !important;
  }
}


/* =========================================================
   VERSION 0.7.3 – GLOBAL FOOTER STRIPE / DEIN START ROLLOUT
   ========================================================= */

/* Alle Checkout-Schritte erhalten denselben hochwertigen Abschluss-Stripe. */
#nfco .nfco__footer {
  position: relative !important;
  min-height: 176px !important;
  padding: 28px 30px 24px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 82% 42%, rgba(219,0,0,.06) 0%, rgba(219,0,0,0) 31%),
    radial-gradient(circle at 22% 16%, rgba(17,17,17,.028) 0%, rgba(17,17,17,0) 32%),
    linear-gradient(180deg, #fffefd 0%, #f8f6f2 100%) !important;
  border-top: 1px solid rgba(17,17,17,.07) !important;
  box-shadow:
    0 -20px 42px rgba(255,255,255,.98),
    0 -1px 0 rgba(17,17,17,.055),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  isolation: isolate;
}

#nfco .nfco__footer::before {
  content: 'DEIN START.';
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  z-index: 0;
  color: rgba(17,17,17,.038);
  font-size: clamp(76px, 8vw, 138px);
  line-height: .84;
  font-weight: 900;
  letter-spacing: -.078em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Die kleine Infozeile wird bewusst entfernt – Fokus auf Preis + CTA. */
#nfco .nfco__footer::after,
#nfco .nfco__footer.is-final::after {
  content: none !important;
  display: none !important;
}

#nfco .nfco__footer-inner {
  position: relative !important;
  z-index: 3 !important;
  min-height: 122px !important;
  width: 100% !important;
  align-items: center !important;
}

/* Nicht-Final-Schritte sauberer und bewusster komponieren. */
#nfco .nfco__footer:not(.is-final) .nfco__footer-inner {
  grid-template-columns: minmax(118px, .7fr) minmax(220px, .9fr) minmax(118px, .7fr) !important;
  column-gap: 24px !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-total {
  justify-self: center !important;
  transform: none !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
  transform: translate(-6px, -24px) rotate(-.6deg) !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
  transform: translate(-6px, -27px) rotate(0deg) scale(1.014) !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__back,
#nfco .nfco__footer:not(.is-final) .nfco__primary {
  position: relative !important;
  z-index: 5 !important;
  min-height: 52px !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.06) !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__back:hover,
#nfco .nfco__footer:not(.is-final) .nfco__primary:hover {
  transform: translateY(-1px) !important;
}

/* Finalseite behält ihren stärkeren Charakter, aber mit demselben Master-Watermark. */
#nfco .nfco__footer.is-final {
  min-height: 194px !important;
  padding: 30px 34px 26px !important;
}

#nfco .nfco__footer.is-final::before {
  bottom: -22px;
  color: rgba(17,17,17,.04);
  font-size: clamp(88px, 8.5vw, 148px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  #nfco .nfco__footer {
    min-height: 166px !important;
    padding: 24px 22px 20px !important;
  }

  #nfco .nfco__footer::before {
    font-size: clamp(64px, 7vw, 108px);
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner {
    grid-template-columns: 110px 176px minmax(160px, 1fr) !important;
    column-gap: 16px !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
    transform: translate(0, -20px) rotate(0deg) !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
    transform: translate(0, -22px) scale(1.01) !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer {
    min-height: 150px !important;
    padding: 22px 16px 18px !important;
  }

  #nfco .nfco__footer::before {
    bottom: -10px;
    font-size: 66px;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 106px !important;
    grid-template-columns: 96px 138px minmax(0,1fr) !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover,
  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(0, -18px) rotate(0deg) !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__footer {
    min-height: auto !important;
    padding: 16px 14px 18px !important;
  }

  #nfco .nfco__footer::before {
    display: none !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action' !important;
    row-gap: 11px !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    grid-area: price;
    justify-self: center !important;
  }

  #nfco .nfco__back,
  #nfco .nfco__footer:not(.is-final) .nfco__back,
  #nfco .nfco__footer.is-final .nfco__back {
    grid-area: back;
    width: 100% !important;
  }

  #nfco .nfco__primary,
  #nfco .nfco__primary--pay,
  #nfco .nfco__footer:not(.is-final) .nfco__primary,
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    grid-area: action;
    width: 100% !important;
    justify-self: stretch !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover,
  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nfco .nfco__footer:not(.is-final) .nfco__back,
  #nfco .nfco__footer:not(.is-final) .nfco__primary,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
    transition: none !important;
  }
}


/* =========================================================
   VERSION 0.7.4 – FOOTER FINE TUNING / BRACHIAL DEIN START
   ========================================================= */

/* Footer insgesamt kompakter, Sticker größer und Wasserzeichen brachialer / dezentraler. */
#nfco .nfco__footer {
  min-height: 146px !important;
  padding: 20px 28px 16px !important;
}

#nfco .nfco__footer::before {
  left: 24% !important;
  bottom: -38px !important;
  transform: none !important;
  font-size: clamp(120px, 12vw, 220px) !important;
  line-height: .78 !important;
  letter-spacing: -.092em !important;
  color: rgba(17,17,17,.048) !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#nfco .nfco__footer-inner {
  min-height: 92px !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-inner {
  grid-template-columns: minmax(118px, .68fr) minmax(250px, .9fr) minmax(118px, .68fr) !important;
  column-gap: 22px !important;
}

/* Price sticker rund 10 % größer und deutlicher überlappend. */
#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  width: 234px !important;
  height: 234px !important;
  padding: 31px 22px 22px !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
  transform: translate(-10px, -54px) rotate(-1.2deg) !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
  transform: translate(-10px, -58px) rotate(-.2deg) scale(1.016) !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker {
  transform: translate(-6px, -58px) rotate(-1deg) !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translate(-6px, -62px) rotate(0deg) scale(1.018) !important;
}

#nfco .nfco__footer-sticker::before {
  top: 20px !important;
  width: 46px !important;
}

#nfco .nfco__footer-sticker::after {
  inset: 9px !important;
}

#nfco .nfco__footer-sticker > span {
  max-width: 156px !important;
  font-size: 8.7px !important;
}

#nfco .nfco__footer-sticker strong {
  margin-top: 14px !important;
}

#nfco .nfco__footer-sticker strong .nfco__price-shell {
  grid-template-columns: auto 34px !important;
  grid-template-rows: 32px 36px !important;
  column-gap: 5px !important;
}

#nfco .nfco__footer-sticker .nfco__price-euro {
  font-size: 84px !important;
}

#nfco .nfco__footer-sticker .nfco__price-cents {
  font-size: 22px !important;
}

#nfco .nfco__footer-sticker .nfco__price-symbol {
  font-size: 28px !important;
  margin-top: 1px !important;
}

#nfco .nfco__footer-sticker small {
  margin-top: 11px !important;
  max-width: 152px !important;
  font-size: 7.6px !important;
}

#nfco .nfco__footer.is-final {
  min-height: 154px !important;
  padding: 20px 30px 16px !important;
}

#nfco .nfco__footer.is-final::before {
  left: 30% !important;
  bottom: -46px !important;
  font-size: clamp(136px, 13.5vw, 246px) !important;
  color: rgba(17,17,17,.052) !important;
}

#nfco .nfco__footer.is-final .nfco__footer-inner {
  min-height: 98px !important;
  grid-template-columns: auto minmax(248px, .88fr) minmax(390px, 520px) !important;
  column-gap: 28px !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__footer {
    min-height: 138px !important;
    padding: 18px 20px 14px !important;
  }

  #nfco .nfco__footer::before {
    left: 18% !important;
    bottom: -28px !important;
    font-size: clamp(92px, 10vw, 164px) !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 88px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 220px !important;
    height: 220px !important;
    padding: 29px 20px 20px !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
    transform: translate(0, -44px) rotate(0deg) !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(0, -48px) rotate(0deg) !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer {
    min-height: 132px !important;
    padding: 18px 16px 14px !important;
  }

  #nfco .nfco__footer::before {
    left: 10% !important;
    bottom: -16px !important;
    font-size: 88px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 198px !important;
    height: 198px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 72px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-symbol {
    font-size: 24px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-cents {
    font-size: 18px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__footer {
    min-height: auto !important;
    padding: 16px 14px 18px !important;
  }

  #nfco .nfco__footer::before {
    display: none !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 176px !important;
    height: 176px !important;
    padding: 24px 16px 16px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 58px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-symbol {
    font-size: 20px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-cents {
    font-size: 16px !important;
  }
}


/* =========================================================
   VERSION 0.7.5 – FOOTER HEIGHT REDUCTION / STICKER STAYS
   ========================================================= */

/* Desktop: Footer nochmals deutlich flacher, Buttons tiefer, Sticker bleibt visuell auf seiner Höhe. */
#nfco .nfco__footer {
  min-height: 108px !important;
  padding: 12px 28px 10px !important;
}

#nfco .nfco__footer-inner {
  min-height: 62px !important;
  align-items: end !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__back,
#nfco .nfco__footer:not(.is-final) .nfco__primary,
#nfco .nfco__footer.is-final .nfco__back,
#nfco .nfco__footer.is-final .nfco__primary--pay {
  align-self: end !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
  transform: translate(-10px, -92px) rotate(-1.2deg) !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
  transform: translate(-10px, -96px) rotate(-.2deg) scale(1.016) !important;
}

#nfco .nfco__footer.is-final {
  min-height: 114px !important;
  padding: 12px 30px 10px !important;
}

#nfco .nfco__footer.is-final .nfco__footer-inner {
  min-height: 66px !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker {
  transform: translate(-6px, -96px) rotate(-1deg) !important;
}

#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translate(-6px, -100px) rotate(0deg) scale(1.018) !important;
}

/* Wasserzeichen darf trotz flacherem Footer groß bleiben und tiefer sitzen. */
#nfco .nfco__footer::before {
  bottom: -48px !important;
}

#nfco .nfco__footer.is-final::before {
  bottom: -56px !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__footer {
    min-height: 124px !important;
    padding: 16px 20px 12px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 74px !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
    transform: translate(0, -56px) rotate(0deg) !important;
  }

  #nfco .nfco__footer.is-final {
    min-height: 132px !important;
    padding: 16px 22px 12px !important;
  }

  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(0, -60px) rotate(0deg) !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 132px !important;
    padding: 18px 16px 14px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 92px !important;
    align-items: center !important;
  }

  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover,
  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
    transform: translate(0, -20px) rotate(0deg) !important;
  }
}

/* =========================================================
   VERSION 0.7.6 – TRUE COMPACT FOOTER / FIXED MEDALLION FLOW
   ========================================================= */

/*
   Der Price-Sticker wird aus dem normalen Grid-Flow genommen.
   Dadurch bestimmt er NICHT länger die Footer-Höhe.
   Ergebnis: tatsächlich flacher Footer auf Step 01–05,
   mehr sichtbarer Content und mittig platzierte Buttons.
*/
@media (min-width: 901px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    padding: 14px 28px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) 250px minmax(180px, 1fr) !important;
    column-gap: 24px !important;
    align-items: center !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 70 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    justify-self: auto !important;
    align-self: auto !important;
    transform: translate(-50%, -82%) !important;
    pointer-events: none;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
    width: 234px !important;
    height: 234px !important;
    transform: rotate(-1.1deg) !important;
    pointer-events: auto;
  }

  #nfco .nfco__footer-sticker:hover,
  #nfco .nfco__footer.is-final .nfco__footer-sticker:hover,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker:hover {
    transform: translateY(-2px) rotate(-.1deg) scale(1.016) !important;
  }

  #nfco .nfco__footer .nfco__back,
  #nfco .nfco__footer:not(.is-final) .nfco__back,
  #nfco .nfco__footer.is-final .nfco__back {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }

  #nfco .nfco__footer .nfco__primary,
  #nfco .nfco__footer:not(.is-final) .nfco__primary,
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  /* Gleiche Grundhöhe auch auf Step 05; nur CTA bleibt breiter. */
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    width: min(100%, 520px) !important;
  }

  /* Großes DEIN START bleibt bewusst angeschnitten im flachen Stripe. */
  #nfco .nfco__footer::before,
  #nfco .nfco__footer.is-final::before {
    bottom: -64px !important;
  }
}

/* Tablet: ebenfalls kompakter, aber mit etwas mehr Sicherheitsraum. */
@media (min-width: 641px) and (max-width: 900px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    padding: 14px 16px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 108px 170px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -73%) !important;
    z-index: 70 !important;
    pointer-events: none;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-sticker {
    width: 190px !important;
    height: 190px !important;
    transform: none !important;
    pointer-events: auto;
  }

  #nfco .nfco__footer .nfco__back,
  #nfco .nfco__footer.is-final .nfco__back {
    align-self: center !important;
  }

  #nfco .nfco__footer .nfco__primary,
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    align-self: center !important;
  }
}


/* =========================================================
   VERSION 0.7.7 – FOOTER / PRICE-STICKER LAYOUT FIX
   - Footer etwas höher und sauberer ausbalanciert
   - Price-Sticker wieder mittig und buttonsicher
   - Mehr Scroll-/Content-Luft oberhalb des Footers
   - CTA-Button final ohne Text-Overflow
   ========================================================= */

/* Mehr untere Luft, damit der Sticker keinen Content verdeckt. */
#nfco .nfco__step,
#nfco .nfco__success {
  padding-bottom: 154px !important;
}

#nfco .nfco__step[data-nfco-step="5"] {
  padding-bottom: 176px !important;
}

/* Footer etwas höher, Buttons mittig, Sticker bleibt dominant. */
#nfco .nfco__footer,
#nfco .nfco__footer.is-final {
  min-height: 134px !important;
  padding: 14px 42px 16px !important;
  overflow: visible !important;
}

#nfco .nfco__footer-inner,
#nfco .nfco__footer.is-final .nfco__footer-inner {
  position: relative !important;
  min-height: 102px !important;
  width: min(1160px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 24px !important;
}

/* Sticker bekommt eigene Mitte und stört keine Buttons. */
#nfco .nfco__footer-total,
#nfco .nfco__footer.is-final .nfco__footer-total {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -24px) !important;
  margin: 0 !important;
  z-index: 70 !important;
  justify-self: auto !important;
}

#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  width: 198px !important;
  height: 198px !important;
  transform: none !important;
}

#nfco .nfco__footer-sticker:hover,
#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translateY(-2px) scale(1.01) !important;
}

/* Back / Weiter / Abschluss bleiben frei von Überlagerungen. */
#nfco .nfco__back {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
}

#nfco .nfco__primary,
#nfco .nfco__primary--pay {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
}

#nfco .nfco__primary--pay {
  width: min(100%, 438px) !important;
  min-width: 438px !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  font-size: 10px !important;
}

/* Auf der Finalseite keine Sonderverschiebung mehr – bleibt sauber mittig. */
#nfco .nfco__footer.is-final .nfco__footer-inner {
  grid-template-columns: auto 1fr auto !important;
}

/* Desktop-Large: ein Hauch mehr Luft zum Review-Bereich. */
#nfco .nfco__review-grid {
  margin-bottom: 10px !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 142px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 160px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 126px !important;
    padding: 12px 26px 14px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 96px !important;
    column-gap: 16px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    transform: translate(-50%, -20px) !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 182px !important;
    height: 182px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 64px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-cents {
    font-size: 18px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-symbol {
    font-size: 22px !important;
  }

  #nfco .nfco__primary--pay {
    min-width: 360px !important;
    width: min(100%, 390px) !important;
    font-size: 9px !important;
    padding-inline: 22px !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 126px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 142px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 112px !important;
    padding: 12px 14px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 84px !important;
    grid-template-columns: auto 1fr auto !important;
    column-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    transform: translate(-50%, -12px) !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 146px !important;
    height: 146px !important;
    padding: 19px 10px 12px !important;
  }

  #nfco .nfco__footer-sticker > span {
    font-size: 6.8px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-euro {
    font-size: 48px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-cents {
    font-size: 14px !important;
  }

  #nfco .nfco__footer-sticker .nfco__price-symbol {
    font-size: 17px !important;
  }

  #nfco .nfco__footer-sticker small {
    font-size: 6px !important;
    max-width: 104px !important;
  }

  #nfco .nfco__primary--pay {
    min-width: 0 !important;
    width: min(100%, 300px) !important;
    font-size: 8.5px !important;
    padding-inline: 16px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 110px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 124px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 0 !important;
    padding: 12px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action' !important;
    min-height: 0 !important;
    row-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: static !important;
    transform: none !important;
    grid-area: price !important;
    justify-self: center !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 126px !important;
    height: 126px !important;
  }

  #nfco .nfco__primary--pay {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   VERSION 0.7.8 – FOOTER / CTA / STICKER HOTFIX
   - Submit-CTA nur im Check-Step sichtbar
   - Price-Sticker horizontal sauber mittig
   - Footer etwas höher und vertikal sauber zentriert
   - Mehr Content-Luft oberhalb des Footers
   ========================================================= */

/* Hidden-Status des Abschlussbuttons strikt respektieren. */
#nfco .nfco__primary--pay[hidden],
#nfco .nfco__primary[hidden],
#nfco [hidden].nfco__primary--pay,
#nfco [hidden].nfco__primary {
  display: none !important;
}

#nfco .nfco__footer:not(.is-final) .nfco__primary--pay {
  display: none !important;
}

#nfco .nfco__footer.is-final #nfco-next {
  display: none !important;
}

#nfco .nfco__footer.is-final #nfco-submit:not([hidden]) {
  display: inline-flex !important;
}

/* Einheitliche Footer-Höhe und mehr Freiraum für den Content. */
#nfco .nfco__step,
#nfco .nfco__success {
  padding-bottom: 170px !important;
}

#nfco .nfco__step[data-nfco-step="5"] {
  padding-bottom: 188px !important;
}

#nfco .nfco__footer,
#nfco .nfco__footer.is-final {
  min-height: 122px !important;
  padding: 14px 42px 18px !important;
  overflow: visible !important;
}

#nfco .nfco__footer-inner,
#nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
#nfco .nfco__footer.is-final .nfco__footer-inner {
  position: relative !important;
  width: min(1160px, 100%) !important;
  min-height: 90px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 24px !important;
}

#nfco .nfco__back {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
}

#nfco #nfco-next,
#nfco #nfco-submit {
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
}

/* Sticker immer horizontal exakt mittig. */
#nfco .nfco__footer-total,
#nfco .nfco__footer:not(.is-final) .nfco__footer-total,
#nfco .nfco__footer.is-final .nfco__footer-total {
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  justify-self: auto !important;
}

#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -44%) !important;
  width: 192px !important;
  height: 192px !important;
  z-index: 70 !important;
}

#nfco .nfco__footer-sticker:hover,
#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translate(-50%, -46%) scale(1.01) !important;
}

/* Abschlussbutton bleibt groß genug für volle Lesbarkeit. */
#nfco .nfco__footer.is-final .nfco__primary--pay {
  width: min(100%, 520px) !important;
  min-width: 520px !important;
  min-height: 54px !important;
  padding: 0 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  font-size: 10px !important;
}

/* Weiter / Zurück optisch wieder sauber auf Achse. */
#nfco .nfco__back,
#nfco #nfco-next,
#nfco #nfco-submit {
  min-height: 48px !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 158px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 176px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 116px !important;
    padding: 14px 26px 16px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 84px !important;
    column-gap: 16px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 176px !important;
    height: 176px !important;
  }

  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 430px !important;
    width: min(100%, 430px) !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 144px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 160px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 108px !important;
    padding: 12px 16px 14px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 78px !important;
    column-gap: 12px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 150px !important;
    height: 150px !important;
  }

  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 320px !important;
    width: min(100%, 320px) !important;
    font-size: 9px !important;
    padding-inline: 20px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__step,
  #nfco .nfco__success {
    padding-bottom: 118px !important;
  }

  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 132px !important;
  }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 0 !important;
    padding: 12px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action' !important;
    min-height: 0 !important;
    row-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer:not(.is-final) .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    grid-area: price !important;
    justify-self: center !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    position: static !important;
    transform: none !important;
    width: 126px !important;
    height: 126px !important;
  }

  #nfco .nfco__back {
    grid-area: back !important;
  }

  #nfco #nfco-next,
  #nfco #nfco-submit {
    grid-area: action !important;
  }

  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   VERSION 0.7.9 – FOOTER / STICKER FINAL POSITIONING FIX
   - Price-Sticker wieder vollständig sichtbar
   - horizontal exakt mittig im Footer-Overlay
   - Footer ca. 10 % höher
   - Buttons wieder sauber vertikal mittig
   ========================================================= */

/* CTA-Logik hart absichern */
#nfco .nfco__footer:not(.is-final) #nfco-submit,
#nfco .nfco__footer:not(.is-final) .nfco__primary--pay {
  display: none !important;
}
#nfco .nfco__footer.is-final #nfco-next {
  display: none !important;
}
#nfco .nfco__footer.is-final #nfco-submit:not([hidden]) {
  display: inline-flex !important;
}

/* Mehr Luft über dem Footer, damit der Sticker keinen Content verdeckt */
#nfco .nfco__step,
#nfco .nfco__success {
  padding-bottom: 184px !important;
}
#nfco .nfco__step[data-nfco-step="5"] {
  padding-bottom: 206px !important;
}

/* Footer leicht höher und als stabile Bühne für Sticker / Buttons */
#nfco .nfco__footer,
#nfco .nfco__footer.is-final {
  min-height: 136px !important;
  padding: 16px 42px 20px !important;
  overflow: visible !important;
}

#nfco .nfco__footer-inner,
#nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
#nfco .nfco__footer.is-final .nfco__footer-inner {
  position: relative !important;
  width: min(1160px, 100%) !important;
  min-height: 100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 24px !important;
  overflow: visible !important;
}

#nfco .nfco__back,
#nfco #nfco-next,
#nfco #nfco-submit {
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
  min-height: 48px !important;
}
#nfco .nfco__back { grid-column: 1 !important; justify-self: start !important; }
#nfco #nfco-next,
#nfco #nfco-submit { grid-column: 3 !important; justify-self: end !important; }

/* Vollflächiges Overlay für exakte Sticker-Zentrierung */
#nfco .nfco__footer-total,
#nfco .nfco__footer:not(.is-final) .nfco__footer-total,
#nfco .nfco__footer.is-final .nfco__footer-total {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  pointer-events: none !important;
  z-index: 70 !important;
}

#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: -12px !important;
  transform: translateX(-50%) !important;
  width: 192px !important;
  height: 192px !important;
  z-index: 71 !important;
  pointer-events: auto !important;
}

#nfco .nfco__footer-sticker:hover,
#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.01) !important;
}

/* Finaler CTA groß genug für volle Zeile */
#nfco .nfco__footer.is-final .nfco__primary--pay {
  width: min(100%, 540px) !important;
  min-width: 540px !important;
  min-height: 56px !important;
  padding: 0 36px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__step,
  #nfco .nfco__success { padding-bottom: 172px !important; }
  #nfco .nfco__step[data-nfco-step="5"] { padding-bottom: 194px !important; }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 128px !important;
    padding: 14px 28px 18px !important;
  }
  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 94px !important;
    column-gap: 18px !important;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 182px !important;
    height: 182px !important;
    bottom: -10px !important;
  }
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 450px !important;
    width: min(100%, 450px) !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__step,
  #nfco .nfco__success { padding-bottom: 154px !important; }
  #nfco .nfco__step[data-nfco-step="5"] { padding-bottom: 174px !important; }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 116px !important;
    padding: 12px 18px 16px !important;
  }
  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 82px !important;
    column-gap: 12px !important;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 156px !important;
    height: 156px !important;
    bottom: -6px !important;
  }
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 330px !important;
    width: min(100%, 330px) !important;
    padding-inline: 20px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__step,
  #nfco .nfco__success { padding-bottom: 122px !important; }
  #nfco .nfco__step[data-nfco-step="5"] { padding-bottom: 138px !important; }

  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 0 !important;
    padding: 12px !important;
  }
  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action' !important;
    min-height: 0 !important;
    row-gap: 10px !important;
  }
  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    pointer-events: auto !important;
    grid-area: price !important;
    justify-self: center !important;
  }
  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    position: static !important;
    transform: none !important;
    width: 126px !important;
    height: 126px !important;
  }
  #nfco .nfco__back { grid-area: back !important; }
  #nfco #nfco-next,
  #nfco #nfco-submit { grid-area: action !important; }
  #nfco .nfco__footer.is-final .nfco__primary--pay {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   VERSION 0.8.0 – PRICE-STICKER FINAL CENTERING
   ========================================================= */

/* Footer ist die einzige Positionierungsbasis für das Preis-Medallion. */
#nfco .nfco__footer,
#nfco .nfco__footer.is-final {
  position: relative !important;
  min-height: 150px !important;
  padding: 18px 42px 20px !important;
  overflow: visible !important;
}

/* Das Button-Grid bleibt funktional, ist aber kein Positionierungs-Parent mehr. */
#nfco .nfco__footer-inner,
#nfco .nfco__footer:not(.is-final) .nfco__footer-inner,
#nfco .nfco__footer.is-final .nfco__footer-inner {
  position: static !important;
  width: min(1160px, 100%) !important;
  min-height: 112px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 24px !important;
}

/* Exakt mittig relativ zum kompletten Footer. */
#nfco .nfco__footer-total,
#nfco .nfco__footer:not(.is-final) .nfco__footer-total,
#nfco .nfco__footer.is-final .nfco__footer-total {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 70 !important;
}

#nfco .nfco__footer-sticker,
#nfco .nfco__footer.is-final .nfco__footer-sticker {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 192px !important;
  height: 192px !important;
  z-index: 71 !important;
  pointer-events: auto !important;
}

#nfco .nfco__footer-sticker:hover,
#nfco .nfco__footer.is-final .nfco__footer-sticker:hover {
  transform: translate(-50%, -51.5%) scale(1.01) !important;
}

/* Buttons bleiben auf den äußeren Positionen, vertikal exakt mittig. */
#nfco .nfco__back,
#nfco #nfco-next,
#nfco #nfco-submit {
  align-self: center !important;
  position: relative !important;
  z-index: 72 !important;
}

#nfco .nfco__back {
  grid-column: 1 !important;
  justify-self: start !important;
}

#nfco #nfco-next,
#nfco #nfco-submit {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Untere Scrollreserve passend zur neuen Footerhöhe. */
#nfco .nfco__step,
#nfco .nfco__success {
  padding-bottom: 194px !important;
}

#nfco .nfco__step[data-nfco-step="5"] {
  padding-bottom: 212px !important;
}

@media (max-width: 1180px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 140px !important;
    padding: 16px 28px 18px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 106px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 182px !important;
    height: 182px !important;
  }
}

@media (max-width: 900px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 124px !important;
    padding: 14px 18px 16px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    min-height: 94px !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 156px !important;
    height: 156px !important;
  }
}

@media (max-width: 640px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 0 !important;
    padding: 12px !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      'price price'
      'back action' !important;
    min-height: 0 !important;
    row-gap: 10px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: static !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    grid-area: price !important;
    justify-self: center !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    position: static !important;
    transform: none !important;
    width: 126px !important;
    height: 126px !important;
  }
}

/* =========================================================
   VERSION 0.8.1 – FOOTER / PRICE-STICKER FINAL GEOMETRY FIX
   ========================================================= */
@media (min-width: 641px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    position: relative !important;
    overflow: visible !important;
    min-height: 138px !important;
    padding: 14px 28px 18px !important;
    isolation: isolate;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 106px !important;
    column-gap: 0 !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
    justify-self: auto !important;
    pointer-events: none !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    width: 176px !important;
    height: 176px !important;
    margin: 0 !important;
    transform: none !important;
  }

  #nfco .nfco__back,
  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    position: relative;
    z-index: 4;
    align-self: center !important;
  }

  #nfco .nfco__primary--pay {
    min-width: min(100%, 520px) !important;
    padding-inline: 30px !important;
    font-size: 13px !important;
  }

  #nfco .nfco__step[data-nfco-step="1"],
  #nfco .nfco__step[data-nfco-step="2"],
  #nfco .nfco__step[data-nfco-step="3"],
  #nfco .nfco__step[data-nfco-step="4"],
  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 218px !important;
  }
}


/* =========================================================
   VERSION 0.8.3 – FOOTER / PRICE-STICKER TRUE CENTER FIX
   Sticker exakt mittig im Footer und etwas höher schwebend.
   ========================================================= */
@media (min-width: 641px) {
  #nfco .nfco__footer,
  #nfco .nfco__footer.is-final {
    min-height: 150px !important;
    padding: 16px 28px 20px !important;
    overflow: visible !important;
  }

  #nfco .nfco__footer-inner,
  #nfco .nfco__footer.is-final .nfco__footer-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 114px !important;
  }

  #nfco .nfco__footer-total,
  #nfco .nfco__footer.is-final .nfco__footer-total {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: 182px !important;
    height: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
    display: block !important;
    text-align: center !important;
  }

  #nfco .nfco__footer-sticker,
  #nfco .nfco__footer.is-final .nfco__footer-sticker {
    position: relative !important;
    width: 182px !important;
    height: 182px !important;
    margin: 0 !important;
    transform: translateY(-34px) !important;
  }

  #nfco .nfco__back,
  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    position: relative !important;
    z-index: 6 !important;
    align-self: center !important;
  }

  #nfco .nfco__back {
    margin-right: auto !important;
  }

  #nfco .nfco__primary,
  #nfco .nfco__primary--pay {
    margin-left: auto !important;
  }

  #nfco .nfco__primary--pay {
    min-width: min(100%, 560px) !important;
    padding-inline: 32px !important;
    font-size: 13px !important;
  }

  #nfco .nfco__step[data-nfco-step="1"],
  #nfco .nfco__step[data-nfco-step="2"],
  #nfco .nfco__step[data-nfco-step="3"],
  #nfco .nfco__step[data-nfco-step="4"],
  #nfco .nfco__step[data-nfco-step="5"] {
    padding-bottom: 226px !important;
  }
}