/*
  Kunden-Shop: Abschnitte & Container.
  Handy (< 640px): randlos – keine Boxen, Abschnitte nur durch Trennlinie getrennt,
  damit der Text die volle Breite nutzt (Layout-Rand 16px reicht).
  Ab 640px: Glas-Karten wie bisher (entspricht rounded-3xl border bg-white/70 p-6 ring-1 backdrop-blur-xl).
  Bewusst als statisches CSS (kein Tailwind-Build nötig).
*/
html { scroll-behavior: smooth; }

.shop-wrap { padding: .25rem 0 1.5rem; }
.shop-wrap-x { padding-left: 0; padding-right: 0; }

.shop-card {
  padding: 0 0 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  scroll-margin-top: 1rem;
}
html.dark .shop-card { border-bottom-color: rgba(255, 255, 255, .10); }

@media (min-width: 640px) {
  .shop-wrap { padding: 2rem 1.5rem; }
  .shop-wrap--tight { padding-left: 1rem; padding-right: 1rem; }
  .shop-wrap--tall { padding-top: 4rem; padding-bottom: 4rem; }
  .shop-wrap-x { padding-left: 1.5rem; padding-right: 1.5rem; }

  .shop-card {
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(0, 0, 0, .05);
    background-color: rgba(255, 255, 255, .7);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
  .shop-card--lg { padding: 2rem; }
  .shop-card--raised {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 25px 50px -12px rgba(0, 0, 0, .25);
  }

  html.dark .shop-card {
    border-color: rgba(255, 255, 255, .10);
    background-color: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  }
  html.dark .shop-card--raised {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 25px 50px -12px rgba(0, 0, 0, .25);
  }
}

@media (min-width: 1024px) {
  .shop-wrap-x { padding-left: 2rem; padding-right: 2rem; }
}