/* Tarif-Badges im Vorschau-Formular des PDF-Imports (nur im Vorschau-Club, siehe preview-hints.js). */
.va-tier {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}

.va-tier-silber {
  background: #e6e9f2;
  color: #3a4468;
  border: 1px solid #c9cfe3;
}

.va-tier-gold {
  background: #fff1c9;
  color: #7a5500;
  border: 1px solid #f0d58a;
}

#signature-container > .va-tier {
  display: block;
  width: fit-content;
  margin: 0 auto 6px;
}

/* Hervorhebung durch die Landingpage (preview-hints.js, "va-focus"). */
.va-focus {
  border-radius: 12px;
  outline: 2px solid #6d5dfc;
  outline-offset: 6px;
  background: rgba(109, 93, 252, .07);
  animation: va-focus-pulse 1.4s ease-in-out 2;
}

@keyframes va-focus-pulse {
  50% { outline-color: rgba(34, 195, 242, .9); }
}

@media (prefers-reduced-motion: reduce) {
  .va-focus { animation: none; }
}

/* Vorschau in der Landingpage: kein eigener Seitenhintergrund, die Karte schwebt auf dem Hintergrund der Seite. */
html.va-preview,
html.va-preview body,
html.va-preview .form-page-wrapper {
  background: transparent !important;
}

/* SmartWizard: Mit enableNavigationAlways bekommen noch nicht besuchte Schritte nicht die Klasse "default" und hätten
   keine Kreisfüllung. Sie sehen hier genauso aus wie im normalen Formular und sind anklickbar. */
html.va-preview .sw-theme-dots > .nav .nav-link:not(.active):not(.done) {
  cursor: pointer;
  color: var(--sw-anchor-default-secondary-color);
}

html.va-preview .sw-theme-dots > .nav .nav-link:not(.active):not(.done)::after {
  background-color: var(--sw-anchor-default-secondary-color);
}

html.va-preview .sw-theme-dots > .nav .nav-link:not(.active):not(.done) > .num {
  color: var(--sw-anchor-default-primary-color) !important;
}

/* Schatten der Formular-Karte direkt im Formular (ein CSS-Filter im umgebenden Rahmen der Landingpage würde die
   Auswahllisten der Felder falsch positionieren). */
html.va-preview .form-page-wrapper {
  padding: 0 .75rem 3rem;
}

html.va-preview .form-container {
  box-shadow: 0 22px 50px rgba(40, 50, 120, .2) !important;
}