/* Wrapper */
.br-wrap {
  width: 100%;
}

/* Grid: Desktop 4 Spalten */
.br-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
}

.br-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.br-img {
  width: 100%;
  height: auto;
  display: block;
}

.br-img-link {
  display: block;
  line-height: 0;
}

/* Button */
.br-solution-btn {
  padding: 8px 16px;
  background: #f5f5f5;
  color: #141414;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.875rem;
}

.br-solution-btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Modal */
.br-modal::backdrop {
  background: rgba(0, 0, 0, .5);
}

.br-modal {
  border: 0;
  padding: 0;
}

.br-modal-inner {
  padding: 22px 22px 18px;
  min-width: 260px;
  position: relative;
}

.br-modal-title {
  margin: 0;
  font-size: 20px;
  outline: none;
}

.br-modal-title:focus {
  outline: 2px solid #000;
}

.br-modal-close {
  position: absolute;
  right: 8px;
  top: 6px;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: #D92525;
}

.br-modal-close:hover {
  background: #D92525;
}

/* --- Mobile: horizontaler Slider mit Flex & Scroll-Snap (gehärtet) --- */
@media (max-width: 768px) {
  .br-grid {
    display: flex !important;
    /* verhindert Umbruch */
    gap: 12px !important;
    /* Abstand zwischen Cards */
    overflow-x: auto !important;
    /* horizontales Scrollen */
    scroll-snap-type: x mandatory !important;
    /* Snap aktivieren */
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  .br-item {
    flex: 0 0 85% !important;
    /* jede Karte ~85% der Viewport-Breite */
    min-width: 85% !important;
    /* sichert die Breite */
    scroll-snap-align: start !important;
    /* Snap-Punkt */
  }

  /* Scrollbar ausblenden (nur WebKit-Browser wie Chrome/Safari) */
  .br-grid::-webkit-scrollbar {
    display: none !important;
  }
}