.background {
  background-image: url("../../images/backgrounds/L-4-Titelbild-events.png") !important;
}
.events-wrapper {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.event-description {
  grid-column: 1 / span 2;
  display: grid;
  color: black !important;
}

/* Unscharfer Hintergrund */
.blur-bg {
  position: absolute;
  inset: -2px; /* 2px über den Rand hinaus auf allen Seiten */
  background: rgba(251, 251, 251, 0.9);
  filter: blur(12px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.event-title {
  margin-bottom: 2rem;
  margin-top: 0.5rem;
  color: black !important;
}

/*title schrift abhängig zu containergrösse*/
.event-container {
  container-type: inline-size;
  container-name: eventCard;
}
.event-container:hover {
  background: rgba(255, 255, 255, 0.4);
}

@container eventCard (max-width: 300px) {
  .event-title.desktop-lead {
    font-size: 1.2rem;
  }
}

@container eventCard (min-width: 301px) and (max-width: 400px) {
  .event-title.desktop-lead {
    font-size: 2.5rem;
  }
}

@container eventCard (min-width: 401px) {
  .event-title.desktop-lead {
    font-size: 3rem;
  }
}
#width {
  width: 10.8125rem;
}

/* Sichtbarer Inhalt */
.event-title.lauftext {
  align-self: start !important;
  justify-self: start;
  margin-top: 0;
}
article.event-item .event-date {
  grid-row: 1;
  grid-column: 1 / span 2;
  z-index: 1;
  align-self: start;
  justify-self: start;
}
article.event-item .event-title {
  grid-row: 2;
  grid-column: 1 / span 2;
  z-index: 1;
  align-self: start;
  justify-self: start;
  margin-top: 0.5rem;
}

article.event-item .event-link {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

/* === NORMALES EVENT === */
.event-container {
  grid-column: auto;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* === EINZELNES EVENT-INHALT === */
article.event-item {
  position: relative;
  max-width: 50.375rem;
  min-width: 20rem;
  aspect-ratio: 1 / 1;
  max-height: 50.375rem;
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 1fr;
  padding: 1rem;

  transition: transform 0.4s ease, opacity 0.4s ease;
}
article.event-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  filter: blur(52px);

  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* === DETAILANSICHT-CONTAINER === */
.event-open-container.full-row {
  grid-column: 1 / -1; /* dehnt sich über die gesamte Grid-Zeile aus */
}
.event-open-container {
  grid-column: 1 / -1;
  width: 100%;
  opacity: 0;
  /* transform: scaleY(0.95);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: top; */
  transform: translateX(-4rem); /* statt translateY */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Phase 1: Expandieren */
.event-open-container.expand {
  opacity: 1;
  transform: scaleY(1);
}

/* Während der Übergang läuft, Grid-Shift unterdrücken */
.events-wrapper.block-layout-transition {
  transition: none !important;
}

.event-open-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.hidden {
  opacity: 0;
  transform: translateX(-90px); /* -90px für nach links */
  pointer-events: none;
}

/* === DETAILANSICHT-INHALT === */
.event-open {
  min-width: 20rem;
  height: 100%;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

/* Close-Button oben rechts */
.event-close {
  grid-column: 3; 
  grid-row: 1; 
  justify-self: end; 
  align-self: start; 
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.closing-cross {
  margin: -1rem;
}

.closing-cross:hover {
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

.event-close:hover {
  transform: rotate(-90deg);
}

.event-open::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 0;
  background: rgba(251, 251, 251, 0.9);
  filter: blur(12px);
  opacity: 0.7;
  pointer-events: none; /* wichtig: verhindert, dass Blur-Klicks blockiert */
}

/* Inhalt scharf & über dem Blur */
.event-open > * {
  position: relative;
  z-index: 1;
}

.event-description,
.event-details {
  align-self: end;
}

/* sign-up form */

#signup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 42.0625rem;
  height: 100vh; /* sicherstellen, dass es genau die Bildschirmhöhe ist */

  background: rgba(151, 71, 255, 0.51);
  backdrop-filter: blur(7px);

  transform: translateX(-100%); /* initial außerhalb sichtbar */
  transition: transform 0.5s ease-in-out, opacity 0.3s ease;

  overflow-y: auto;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

#signup-overlay.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.hidden {
  display: none;
}

.signup-form {
  padding: 2rem;
  max-width: 36rem;
}

#close-signup {
  position: absolute;
  top: 0;
  right: 0;
}
.grey {
  color: #bcbcbc;
}
.border-top {
  position: relative;
}

.border-bottom {
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid #bcbcbc;
}
/* top and bottom-line*/
.border-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  max-width: 36rem;
  height: 0.0625rem;
  background-color: #d9d9d9;
}
.border-top::before {
  top: -10px;
}
.border-top::after {
  bottom: -10px;
}
.padding {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
/* Standard: nur Desktop-SVG sichtbar */
.close-mobile {
  display: none;
}

.close-desktop {
  display: inline;
}
@media (max-width: 768px) {
  .events-wrapper {
    padding-top: 8rem !important;
    padding-bottom: 1rem;
  }
  #signup-overlay {
    width: 100vw;
  }
  label.custom-checkbox.small-text.mobile-lauftext {
    white-space: normal; /* → erlaubt Umbruch */
    display: inline-block; /* → blockiert auf der Zeile, aber flexibel */
    max-width: 100%; /* → begrenzt auf Parent */
    line-height: 1.4; /* → bessere Lesbarkeit bei Umbruch */
    word-break: break-word; /* → bricht lange Wörter (optional) */
  }

  /* Events-Grid: 2 Spalten auf Mobile */

  article.event-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: none;
    min-width: auto;
    height: auto;
  }

  .event-container {
    width: 100%;
  }

  /* Optional: kleinere Schriftgröße für mobile Titel */
  .event-title.desktop-lead {
    font-size: 1.2rem;
  }
  .event-title {
    margin-bottom: 0rem;
  }

  /* Event Open View (Detailansicht) auf voller Breite */
  .event-open {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    padding: 1rem;
  }
  .date-and-title {
    grid-column: 1;
    grid-row: 1;
  }

  .event-close {
    grid-column: 2;
    justify-self: start;
    align-self: start;
  }
  /* Auf kleinen Bildschirmen: nur Mobile-SVG sichtbar */
  .close-mobile {
    display: inline;
  }

  .close-desktop {
    display: none;
  }
  #width {
    width: 8.8125rem;
  }
  .signup-button-wrapper {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }
  .price-wrapper {
    padding-top: 1rem;
  }
  .closing-cross {
    margin: 0;
  }
}