/* Pricing */

.pricing > div {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
  .pricing > div {
    /* auto-fit wie bei services: traegt beliebig viele Pakete, Spaltenzahl
       ergibt sich aus der Breite. */
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
}

.pricing article {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--gap-block) var(--gap-inline);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-slow), border-color var(--transition-slow);
}

.pricing article:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.pricing article h3 {
  font-family: var(--font-heading), serif;
  font-size: var(--text-base);
  font-weight: 600;
}

/* subline = Preis, bewusst gross und in der Markenfarbe. */
.pricing article .price {
  font-family: var(--font-heading), serif;
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
}

/* text = Leistungen, meist eine Liste. Aufzaehlungspunkte klein und gedaempft. */
.pricing article > div {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.pricing article ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}