/* Responsive Feinschliff fuer Jakob Hub. */

@media (max-width: 820px) {
  .site-header {
    background: color-mix(in srgb, var(--hub-bg) 82%, transparent);
  }

  .site-nav {
    scrollbar-width: none;
    gap: 4px;
    padding-block: 2px 4px;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--hub-surface) 52%, transparent);
  }

  .hero__facts {
    width: 100%;
  }

  .card-grid {
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .hero {
    overflow-x: clip;
    padding-bottom: 66px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 12vw, 4.2rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
  }

  .hero__lead {
    margin-top: 22px;
    font-size: 1rem;
  }

  .hero__actions {
    margin-top: 26px;
  }

  .hero__facts {
    padding-inline: 18px;
    border-radius: 24px;
  }

  .section {
    padding-block: 64px;
  }

  .section__head {
    margin-bottom: 28px;
  }

  .section__head h2 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .search-row {
    align-items: stretch;
  }

  .search-row label {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .filter-list::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    flex: 0 0 auto;
  }

  .catalog-card {
    border-radius: 20px;
  }
}