/* pricing.css
   Angebotsbühne der Startseite.
   Bildbasierte Premium-Sektion mit fester heller Typografie in beiden Themes.
   Trennt sich bewusst über ein Zierelement von den digitalen Erweiterungen.
*/

.pricing {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--pricing-bg);
}

.pricing::before,
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pricing::before {
  background-image: var(--pricing-overlay), var(--pricing-bg-image-active);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  transform: scale(1.04);
}



.pricing > .shell {
  position: relative;
  z-index: 1;
}

.pricing > .shell::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(-0.15rem, -0.2vw, -0.25rem);
  height: 0px;
  background: var(--signature-divider-core);
}

.pricing .section-head {
  max-width: 54rem;
}

.pricing .section-head h2,
.pricing .section-head h3,
.pricing .section-head p,
.pricing .section-head .section-kicker,
.pricing .pricing__note,
.pricing .pricing__note p,
.pricing .pricing__note a,
.pricing .pricing__chip {
  color: var(--pricing-text);
}

.pricing .section-head h2,
.pricing .section-head h3,
.pricing .pricing__note strong {
  color: var(--pricing-heading);
}

.pricing--signature-stage {
  --pricing-kicker: #d6b4ff;
  --pricing-bg: var(--hero-bg-color);
  --pricing-bg-image-active: var(--hero-bg-image-active);
  --pricing-bg-image-mobile-active: var(--hero-bg-image-mobile-active, var(--hero-bg-image-active));
  --pricing-overlay: var(--hero-bg-primary-overlay), var(--hero-bg-secondary-overlay);
}

.subpage-page .pricing--signature-stage {
  --pricing-bg: var(--subpage-hero-bg);
  --pricing-bg-image-active: var(--subpage-hero-image-active);
  --pricing-bg-image-mobile-active: var(--subpage-hero-image-mobile-active, var(--subpage-hero-image-active));
  --pricing-overlay: var(--subpage-hero-bg-primary-overlay), var(--subpage-hero-bg-secondary-overlay);
}

@media (max-width: 47.99rem) {
  .pricing--signature-stage::before {
    background-image: var(--pricing-overlay), var(--pricing-bg-image-mobile-active, var(--pricing-bg-image-active));
    background-position: center, center top;
  }
}

.pricing .section-kicker,
.pricing .pricing__chip {
  color: var(--pricing-kicker, var(--theme-kicker));
}

.pricing .pricing__note {
  background: var(--pricing-note-bg);
  border-color: var(--pricing-note-border);
  box-shadow: var(--pricing-note-shadow);
  backdrop-filter: blur(12px);
  
}

.pricing .pricing__chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.pricing .pricing__note a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 0.18em;
}

.pricing .pricing__note a:hover {
  text-decoration-color: currentColor;
}