/* Wrapper: centered block with responsive width */
.veranstaltungen-list-wrapper {
  margin: 0 auto;
  width: 80vw;            /* default desktop/tablet */
  overflow: hidden;
  margin-bottom: 3vh;
}

/* Under 767px: 90vw */
@media (max-width: 767px) {
  .veranstaltungen-list-wrapper {
    width: 90vw;
  }
}

.veranstaltung-title {
  margin-bottom: 2rem;
  width: 80vw;
      height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .1);
    color: #fff;
    font-weight: bold;
    background-image: url(images/MPV_stars_background.svg), url(images/MPV_blue.svg);
    background-repeat: repeat, no-repeat;
    background-size: contain, cover;
    background-position: center;
        margin-left: auto;
    margin-right: auto;
}

/* Over 2000px: 50vw */
@media (min-width: 2001px) {
  .veranstaltungen-list-wrapper {
    width: 50vw;
  }
  .veranstaltung-title {
    width: 50vw;
  }
}



.veranstaltung-title h2 {
    font-size: clamp(1.6rem, 2.0vw, 2.5rem);
    margin: 0;
    font-weight: bold;
}
.veranstaltungen-alle {
    text-align: center;
    height: auto;
    margin-bottom: 4vh;
}
.all-btn-veranstaltungen {
    color: #6d4485;
    padding: 8px 26px;
    border-radius: 9px;
    font-size: 1.3em;
    text-decoration: none;
    border: 2px solid #e7dbe7;
    transition: background 0.2s;
}
.all-btn-veranstaltungen:hover {
    background: #e9d9ee;
}

/* Horizontal list */
.veranstaltungen-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 2px 8px 2px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  align-items: stretch; /* equal heights when not wrapping */
  justify-content: center;
}

/* Cards default for mobile: fixed width for swipe */
.veranstaltungen-card {
  overflow: hidden;
  flex: 0 0 320px;          /* mobile swipe width */
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  align-items: center;
}

/* Make inner wrapper fill height so each card visually has same height */
.veranstaltungen-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Desktop: fill full width with 3 equal columns using the wrapper width */
@media (min-width: 992px) {
  .veranstaltungen-list {
    overflow-x: hidden;
    justify-content: space-between; /* spread cards to use full width */
  }
}


/* === Added: responsive centered width rules === */
.veranstaltungen-list-wrapper {
  margin: 0 auto;
  width: 80vw;            /* default */
  overflow: visible;      /* allow full width on desktop */
  margin-bottom: 3vh;
}
@media (max-width: 767px) {
  .veranstaltungen-list-wrapper { width: 90vw; }
}
@media (min-width: 2001px) {
  .veranstaltungen-list-wrapper { width: 50vw; }
}

/* Maintain horizontal swipe on mobile */
.veranstaltungen-list {
  display: flex;
  gap: 24px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  align-items: stretch;
}

.veranstaltungen-card { 
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
.veranstaltungen-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Mobile: swipeable cards */
@media (max-width: 767px) {
  .veranstaltungen-list {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    justify-content: flex-start;
  }
  .veranstaltungen-card {
    flex: 0 0 320px;
    max-width: 92vw;
    scroll-snap-align: start;
  }
}

/* Desktop/Tablet: no scroll, 4 columns that use the full width */
@media (min-width: 768px) {
  .veranstaltungen-list {
    overflow: visible;         /* prevent clipping on wide screens */
    flex-wrap: nowrap;         /* keep one row */
    justify-content: space-between;
    
  }
  .veranstaltungen-card {
    /* 4 equal columns, account for 3 gaps of 24px */
    flex: 0 0 calc((100% - (3 * 24px)) / 4);
    max-width: none;
  }
}