/* =============================================================================
   styles-components.css — Alle UI-Komponenten
   =============================================================================
   Zweck:   Styles für alle interaktiven und visuellen Komponenten.
            Abhängig von Design-Tokens aus styles-layout.css.

   Sektionen:
     1. Branding / Header / Footer-Button / Menü
     2. Toggle & Zahlungsoptionen
     3. Produktkarten, Warenkorb, Stepper
     4. Produktdetailseite, Landing-Argumente
     5. Formulare (Checkout)
   ============================================================================= */

/* --------------------------------------------------------------------------
   1. BRANDING / HEADER / FOOTER-BUTTON / MENÜ
   -------------------------------------------------------------------------- */
.panel-header h1,
.checkout-button {
  margin: 0;
  font-family: var(--font-black);
  font-weight: 900;
  font-size: var(--font-brand);
  line-height: 1;
}

.brand-link {
  color: inherit;
  text-decoration: none;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.brand-logo {
  display: block;
  width: auto;
  height: var(--font-brand);
  fill: currentColor;
}

.checkout-button {
  width: 100%;
  font-size: var(--font-l);
  border-radius: var(--x);
  padding: var(--x);
  color: var(--color-inverse-text);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.menu-morph-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 19;
  pointer-events: none;
  background: var(--color-inverse-surface);
  box-shadow: none;
  opacity: 1;
  -webkit-backdrop-filter: blur(4.5px) contrast(0.5);
  backdrop-filter: blur(4.5px) contrast(0.5);
}

.menu-morph-bg.is-animated {
  transition: left 190ms cubic-bezier(.2, .8, .2, 1),
    top 190ms cubic-bezier(.2, .8, .2, 1),
    width 190ms cubic-bezier(.2, .8, .2, 1),
    height 190ms cubic-bezier(.2, .8, .2, 1),
    border-radius 190ms cubic-bezier(.2, .8, .2, 1),
    opacity 190ms cubic-bezier(.2, .8, .2, 1);
}

.menu-button-shell {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--x-half);
  padding: var(--x-half);
  border-radius: var(--x-half);
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
  position: fixed;
  top: calc(var(--x) * 1.625);
  right: max(var(--x), calc((100vw - min(100vw, var(--content-max-width))) / 2 + var(--x)));
  max-width: calc(100vw - (var(--x) * 2));
  transform: translate3d(0, 0, 0);
  z-index: 30;
  contain: layout paint;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.menu-button-shell.is-open {
  background: transparent;
  color: var(--color-text);
  box-shadow: none;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.menu-button-shell.is-open .menu-button {
  pointer-events: auto;
}

.menu-button-shell.is-open .menu-quick-links {
  opacity: 0;
  transform: translateY(calc(var(--x-half) * -1));
  transition-duration: 60ms;
  pointer-events: none;
}

.menu-button-shell.is-measuring-close-target .menu-quick-links,
.menu-button-shell.is-restoring-close .menu-quick-links {
  opacity: 1;
  transform: translateY(0);
  transition: none;
  pointer-events: none;
}

.menu-button-shell.is-measuring-close-target .menu-quick-links {
  visibility: hidden;
}

.menu-quick-links {
  display: inline-flex;
  align-items: center;
  gap: var(--x-half);
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
  transition: transform 90ms ease, opacity 90ms ease;
}

.menu-quick-links__link {
  display: none;
  align-items: center;
  min-height: 24px;
  color: inherit;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}

.menu-quick-links__link.is-visible {
  display: inline-flex;
}

.menu-label-part {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

.menu-label-part__text {
  display: block;
}

/* Thin = Arial Regular, immer dünn */
.menu-quick-links__link .menu-label-part__text--thin,
.menu-panel .menu-label-part__text--thin {
  font-family: var(--font-regular);
  font-weight: 400;
  opacity: 1;
}

/* Thick = Arial Black, immer dick */
.menu-panel .menu-label-part__text--thick {
  font-family: var(--font-black);
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

/* Quick-Links: thick komplett ausblenden */
.menu-quick-links__link .menu-label-part__text--thick {
  display: none;
}

/* Open state (stable): thick visible, thin hidden (no transition) */
.menu-panel.is-open .menu-label-part__text--thin {
  opacity: 0;
}
.menu-panel.is-open .menu-label-part__text--thick {
  opacity: 1;
}

/* Animating open: crossfade thin→thick with transition */
.menu-panel.is-animating-open .menu-label-part__text--thin {
  opacity: 0;
  transition: opacity 120ms ease;
}
.menu-panel.is-animating-open .menu-label-part__text--thick {
  opacity: 1;
  transition: opacity 120ms ease;
}

/* Animating close: crossfade thick→thin with transition */
.menu-panel.is-animating-close .menu-label-part__text--thin {
  opacity: 1;
  transition: opacity 120ms ease;
}
.menu-panel.is-animating-close .menu-label-part__text--thick {
  opacity: 0;
  transition: opacity 120ms ease;
}

.menu-label-part + .menu-label-part {
  margin-left: .3em;
}

.menu-panel__link .menu-label-part,
.menu-panel__darkmode .menu-label-part {
  display: block;
}

.menu-panel__link .menu-label-part + .menu-label-part,
.menu-panel__darkmode .menu-label-part + .menu-label-part {
  margin-left: 0;
}

.menu-quick-links.is-measuring .menu-quick-links__link {
  display: inline-flex;
}

.menu-button {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
  color: inherit;
  box-shadow: none;
}

.menu-button span {
  display: block;
  width: 24px;
  height: 3px;
  margin-left: auto;
  border-radius: 999px;
  background: currentColor;
}

.menu-panel {
  position: fixed;
  top: var(--x-half);
  right: 0;
  left: 0;
  width: min(100%, var(--content-max-width));
  margin: 0 auto;
  pointer-events: none;
  z-index: 20;
}

.menu-panel__content {
  position: relative;
  width: 100%;
  min-height: calc(52px + var(--x));
  padding: var(--x);
  border-radius: var(--x);
  background: transparent;
  color: var(--color-inverse-text);
  display: grid;
  gap: var(--x-half);
  opacity: 0;
  transition: opacity 180ms ease;
}

.menu-panel.is-open {
  pointer-events: auto;
}

.menu-panel.is-open .menu-panel__content,
.menu-panel.is-animating-open .menu-panel__content,
.menu-panel.is-animating-close .menu-panel__content {
  opacity: 1;
}

.menu-panel.is-preparing-open .menu-panel__content {
  opacity: 1;
  transition: none;
}

.menu-panel.is-resetting-close .menu-panel__content {
  opacity: 0;
  transition: none;
}

.menu-panel__link,
.menu-panel__darkmode {
  color: inherit;
  font-family: var(--font-black);
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}

.menu-panel__link {
  text-decoration: none;
}

[data-tap] {
  transition: opacity 80ms ease;
}
[data-tap].is-tapped {
  opacity: .25;
  transition: none;
}

/* --------------------------------------------------------------------------
   2. TOGGLE & ZAHLUNGSOPTIONEN
   - Gleiches Interaktionsmuster, unterschiedliche Active-Klassen
   -------------------------------------------------------------------------- */
.toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  background: var(--color-toggle);
  border-radius: var(--x-half);
  box-shadow: none;
}

.toggle__option {
  padding: var(--x-half);
  font-family: var(--font-regular);
  font-size: var(--font-body);
  color: var(--color-text);
  background: transparent;
  text-align: center;
  text-decoration: none;
}

.toggle__option.is-active {
  background: var(--color-surface);
  font-family: var(--font-black);
  font-weight: 900;
  box-shadow: var(--panel-bevel);
  position: relative;
  z-index: 1;
}

.toggle__option[data-mode="individuell"].is-active {
  border-radius: var(--x-half) 0 0 var(--x-half);
}

.toggle__option[data-mode="gross"].is-active {
  border-radius: 0 var(--x-half) var(--x-half) 0;
}

/* --------------------------------------------------------------------------
   3. PRODUKTKARTEN / WARENKORB / STEPPER
   -------------------------------------------------------------------------- */
.product-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--x-half);
  align-items: start;
  cursor: pointer;
}

.product-card__image,
.product-card__photo,
.product-card__slider {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  background: var(--color-image);
  font-family: var(--font-black);
  font-weight: 900;
  font-size: var(--font-body);
}

.product-card__image {
  display: grid;
  place-items: center;
}

.product-card__slider {
  overflow: hidden;
}

.product-card__slider-track {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.product-card__slide {
  flex: 0 0 100%;
}

.product-card__photo {
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.product-card__body {
  min-width: 0;
  min-height: 120px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  position: relative;
}

.product-card__title {
  margin: 0;
  font-family: var(--font-black);
  font-weight: 900;
  font-size: var(--font-body);
  line-height: 1.3;
}

.product-card__price,
.stepper__value,
.field__label {
  font-family: var(--font-regular);
  font-size: var(--font-body);
}

.product-card__description {
  margin: 4px 0 0;
  font-family: var(--font-regular);
  font-size: var(--font-m);
  line-height: 1.25;
  color: var(--color-text);
  opacity: .45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__price {
  margin: 4px 0 0;
  line-height: 1.4;
}

.cart-row,
.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--x-half);
}

.cart-row__main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.cart-row__slider,
.cart-row__image {
  width: 56px;
  aspect-ratio: 1 / 1;
  display: block;
}

.cart-row__slider {
  overflow: hidden;
  background: var(--color-image);
  flex-shrink: 0;
}

.cart-row__image {
  object-fit: cover;
}

.cart-row__text {
  display: grid;
  gap: 6px;
}

.cart-row__actions,
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 var(--nk-rand) var(--nk-blau);
  color: var(--nk-blau);
  overflow: hidden;
}

.cart-row__actions {
  flex-shrink: 0;
}

.cart-row__error {
  flex-basis: 100%;
  margin: 0;
}

.stepper {
  margin-top: auto;
  justify-self: end;
}

.product-card .stepper {
  position: absolute;
  right: 0;
  bottom: 0;
}

.stepper__button,
.stepper__value {
  line-height: 1;
}

.stepper__button {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--font-regular);
  font-size: var(--font-title);
  color: var(--nk-blau);
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.stepper__button:hover {
  background: var(--nk-blau-hell);
}
.stepper__button:active {
  background: var(--nk-blau);
  color: #fff;
}

.stepper__value {
  min-width: 12px;
  text-align: center;
  padding: 6px 10px;
}

.cart-total {
  padding-top: var(--x-half);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-black);
  font-weight: 900;
}

.cart-empty {
  padding: var(--x-half);
  border-radius: var(--x-half);
  background: var(--color-soft-surface);
}

/* --------------------------------------------------------------------------
   4. PRODUKTDETAILSEITE / LANDING-ARGUMENTE / FOOTER-LINKS
   -------------------------------------------------------------------------- */
.product-hero {
  overflow: hidden;
}

.product-gallery-slider {
  overflow: hidden;
}

.product-gallery-track {
  display: flex;
  touch-action: pan-y;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.product-gallery-track.is-snapping {
  transition: transform 240ms ease;
}

.product-gallery-slide {
  flex: 0 0 100%;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.product-gallery-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  backface-visibility: hidden;
}

.product-detail-sections {
  display: grid;
  gap: var(--x-half);
}

.footer-links-block {
  width: 100%;
  margin: auto auto var(--x);
  padding: var(--x) var(--x-half) 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text);
}

.footer-links-block__title,
.footer-links-block__items {
  text-align: center;
}

.footer-links-block__title {
  margin: 0 0 var(--x-half);
  display: flex;
  align-items: center;
  gap: var(--x-half);
  font-family: var(--font-black);
  font-weight: 900;
  font-size: var(--font-m);
}

.footer-links-block__title::before,
.footer-links-block__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
}

.footer-links-block__flow {
  --footer-separator-gap: calc(var(--x) / 4);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 var(--footer-separator-gap);
  text-align: center;
  font-size: var(--font-s);
  line-height: 1.8;
}

.footer-links-block__flow--rowed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.footer-links-block__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--footer-separator-gap);
  width: 100%;
  max-width: 100%;
}

.footer-links-block__row--justified {
  align-self: stretch;
  width: 100%;
  justify-content: space-between;
}

.footer-links-block__flow a,
.footer-links-block__flow span {
  color: inherit;
  text-decoration: none;
}

.footer-links-block__group,
.footer-links-block__item a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--footer-separator-gap);
}

.footer-links-block__item {
  white-space: nowrap;
}

.footer-copyright {
  width: 100%;
  margin: var(--x-half) auto 0;
  display: flex;
  align-items: center;
  gap: var(--x-half);
  text-align: center;
  font-family: var(--font-regular);
  font-size: var(--font-s);
}

.footer-copyright::before,
.footer-copyright::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
}

.landing-argument {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--x-half);
  align-items: center;
}

.landing-argument__image {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--color-image);
  font-family: var(--font-regular);
  font-size: var(--font-body);
}

.landing-argument__symbol {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-regular);
  font-size: var(--font-xl);
  line-height: 1;
}

.landing-argument__symbol--legal   { color: var(--color-accent-legal); }
.landing-argument__symbol--price   { color: var(--color-accent-price); }
.landing-argument__symbol--service { color: var(--color-accent-service); }
.landing-argument__symbol--mail    { color: var(--color-accent-mail); }

.landing-argument__content {
  display: grid;
  gap: var(--x-half);
}

.product-copy-block {
  gap: var(--x-half);
}

.product-copy-block--summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--x-half);
}

.product-copy-paragraph p {
  font-family: var(--font-regular);
  font-size: var(--font-m);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. FORMULARE (Checkout)
   - .form-grid--contact und .form-grid--payment sind die zwei Hauptvarianten
   - [data-mode-section] und [data-payment-fields] steuern Sichtbarkeit via JS
   -------------------------------------------------------------------------- */
#checkout-form {
  display: grid;
  gap: var(--x-half);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--x-half);
}

.form-grid--payment {
  margin-top: var(--x-half);
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field__input {
  width: 100%;
  border: 0;
  border-radius: var(--x-half);
  padding: var(--x-half);
  background: var(--color-soft-surface-strong);
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-regular);
  font-weight: normal;
  box-shadow: var(--inner-shadow-soft);
}

.field--error .field__input,
.field__input[aria-invalid="true"],
.field__input:user-invalid {
  color: var(--color-error);
  box-shadow: var(--inner-shadow-soft);
}

.field--error .field__input::placeholder,
.field__input[aria-invalid="true"]::placeholder,
.field__input:user-invalid::placeholder {
  color: var(--color-error);
  opacity: 1;
}

.checkout-payment-note .product-copy-paragraph {
  margin-bottom: 0;
}

.checkout-status {
  min-height: 0;
  margin: 0;
  font-size: var(--font-s);
  opacity: 0.82;
}

.checkout-status:empty {
  display: none;
}

.checkout-status--error {
  color: var(--color-error);
  opacity: 1;
}

.checkout-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* Rechtliche/Service-Seiten */
.legal-page__section a {
  color: inherit;
  font-family: var(--font-black);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   6. Hilfe-Seiten: FAQ und Installation & Aktivierung
   -------------------------------------------------------------------------- */
.help-page {
  padding-bottom: var(--x-half);
}

.help-hero,
.help-section,
.help-guide {
  display: grid;
  gap: var(--x-half);
}

.help-hero .product-card__title {
  font-size: var(--font-title);
  line-height: 1.15;
}

.help-hero--faq .product-card__title {
  font-size: var(--font-m);
}

.help-hero a {
  color: var(--color-text);
  font-family: var(--font-regular);
  font-weight: normal;
  text-decoration: underline;
}

.help-search {
  display: grid;
  gap: calc(var(--x-half) / 2);
  margin-top: calc(var(--x-half) / 2);
  font-family: var(--font-black);
  font-size: var(--font-s);
  font-weight: 900;
}

.help-search__input {
  width: 100%;
}

.help-search__meta {
  font-size: var(--font-s);
  opacity: .7;
}

.help-page {
  font-family: var(--font-regular);
  font-size: var(--font-body);
}

.help-empty {
  margin: 0;
}

.help-accordion,
.help-step,
.help-guide__intro,
.support-callout,
.help-sources {
  color: var(--color-text);
}

.help-accordion[hidden],
.help-guide[hidden],
.help-step[hidden],
.help-empty[hidden],
.support-callout[hidden],
.help-sources[hidden] {
  display: none !important;
}

.help-accordion summary,
.help-inline-details summary,
.help-sources summary {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--x-half);
  font-family: var(--font-black);
  font-weight: 900;
  line-height: 1.2;
  list-style: none;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.help-accordion summary::-webkit-details-marker,
.help-inline-details summary::-webkit-details-marker,
.help-sources summary::-webkit-details-marker {
  display: none;
}

.help-accordion summary::before,
.help-inline-details summary::before,
.help-sources summary::before {
  content: '›';
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-family: var(--font-black);
  font-size: inherit;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.help-accordion[open] summary::before,
.help-inline-details[open] summary::before,
.help-sources[open] summary::before {
  transform: rotate(90deg);
}

.help-accordion summary {
  font-size: var(--font-m);
}

.help-answer,
.help-inline-details p,
.help-step p,
.help-guide__intro p,
.support-callout p,
.help-sources p {
  margin-top: var(--x-half);
  overflow-wrap: break-word;
}

.help-answer p + p,
.help-step p + p,
.support-callout p + p,
.help-sources p + p {
  margin-top: calc(var(--x-half) / 2);
}

.help-answer a.brand-link,
.help-step a.brand-link,
.support-callout a.brand-link,
.help-sources a.brand-link {
  color: inherit;
  font-family: var(--font-black);
  font-weight: 900;
}

.help-actions {
  margin-top: var(--x-half);
}

.help-actions .toggle__option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-black);
  font-size: var(--font-m);
  font-weight: 900;
}

.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--x-half) / 2);
}

.guide-tabs .toggle__option {
  flex: 1 1 auto;
  padding: var(--x-quarter) calc(var(--x-quarter) * 3);
  border-radius: 999px;
  border: var(--nk-rand) solid var(--nk-blau);
  background: transparent;
  color: var(--nk-blau);
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: inherit;
  line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s;
}

.guide-tabs .toggle__option:hover {
  background: var(--nk-blau-hell);
}

.guide-tabs .toggle__option.is-active {
  background: var(--nk-blau);
  border-color: var(--nk-blau);
  color: #fff;
}

.help-step {
  position: relative;
  display: grid;
  gap: calc(var(--x-half) / 2);
  padding-left: calc(var(--x) + var(--x-half));
}

.help-step h3,
.help-guide__intro h3,
.support-callout h3 {
  margin: 0;
  font-family: var(--font-black);
  font-size: var(--font-m);
  line-height: 1.15;
}

.help-step__number {
  position: absolute;
  left: var(--x-half);
  top: var(--x-half);
  width: var(--x);
  font-family: var(--font-black);
  font-size: var(--font-m);
  font-weight: 900;
  line-height: 1.15;
}

.help-step__number::after {
  content: '.';
}

:root {
  --nk-blau: #6b84c7;
  --nk-blau-hell: #c8d1ea;
  --nk-blau-dunkel: #314782;
  --nk-rand: 1.5px;
}

.nk-pill-link,
.product-copy-paragraph a:not(.brand-link):not(.toggle__option),
.help-answer a:not(.brand-link):not(.toggle__option),
.nk-info-pill {
  color: var(--nk-blau);
  border: var(--nk-rand) solid var(--nk-blau);
  background: transparent;
  border-radius: 999px;
  padding: var(--x-quarter) calc(var(--x-quarter) * 3);
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: inherit;
}

.product-copy-paragraph a:not(.brand-link):not(.toggle__option),
.help-answer a:not(.brand-link):not(.toggle__option),
.nk-info-pill {
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.help-path,
.help-step p > strong,
.help-answer p > strong,
.product-copy-paragraph p > strong {
  display: inline-flex;
  align-items: center;
  padding: var(--x-quarter) calc(var(--x-quarter) * 3);
  border-radius: 999px;
  border: var(--nk-rand) solid #000;
  color: #000;
  background: transparent;
  font-family: var(--font-regular);
  font-weight: normal;
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  cursor: default;
}

.help-path-sep {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  opacity: .55;
  flex-shrink: 0;
}

.nk-info-pill {
  cursor: default;
}

.product-copy-paragraph a:not(.brand-link):not(.toggle__option):not(.nk-pill-link)::after,
.help-answer a:not(.brand-link):not(.toggle__option):not(.nk-pill-link)::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='2' y1='9' x2='9' y2='2'/%3E%3Cpolyline points='4,2 9,2 9,7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='2' y1='9' x2='9' y2='2'/%3E%3Cpolyline points='4,2 9,2 9,7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nk-pill-link:hover,
.product-copy-paragraph a:not(.brand-link):not(.toggle__option):hover,
.help-answer a:not(.brand-link):not(.toggle__option):hover,
.nk-info-pill:hover {
  background: var(--nk-blau-hell);
}
.nk-pill-link:active,
.nk-pill-link.is-active,
.product-copy-paragraph a:not(.brand-link):not(.toggle__option):active,
.help-answer a:not(.brand-link):not(.toggle__option):active,
.nk-info-pill:active {
  background: var(--nk-blau);
  border-color: var(--nk-blau);
  color: #fff;
}

.help-guide__visual {
  display: block;
  width: 100%;
  max-width: 720px;
  margin-top: var(--x);
  border-radius: var(--x-half);
  box-shadow: 0 calc(var(--x-half) / 2) var(--x) rgba(0, 0, 0, .12);
}

.help-sources {
  font-size: var(--font-s);
  opacity: .82;
}

.help-sources summary {
  align-items: center;
  font-size: var(--font-s);
}

.help-inline-details {
  margin-top: calc(var(--x-half) / 2);
  padding: var(--x-half);
  border-radius: var(--x-half);
  background: var(--color-soft-surface);
}

.help-inline-details summary {
  font-size: var(--font-s);
}

.help-inline-details summary::after,
.help-sources summary::after {
  font-size: var(--font-s);
}

.help-inline-details p {
  font-size: var(--font-m);
}