.cases-grid-3 {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: flex-start;
  background: #fff;
  padding: 12vw 0 4vw 0;
  box-sizing: border-box;
}



.cases-grid-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  min-width: 220px;
  min-height: 220px;
  max-width: 350px;
  max-height: 350px;
  margin-bottom: 10vw;
  background: transparent;
}

/* === FARBE + TEXT === */
.cases-grid-color-box {
  width: 288px;
  height: 288px;
  background: #dde0e0;
  border-radius: 0.15em;
  margin: 0;
  display: block;
  position: relative;
  transition:
    width 0.36s cubic-bezier(.68,-0.55,.27,1.55),
    height 0.36s cubic-bezier(.68,-0.55,.27,1.55);
  overflow: visible;
}

.cases-grid-color-text {
  position: absolute;
  z-index: 3;
  font-family: 'PP Neue Montreal', Book, sans-serif;
  font-size: 160px;
  font-weight: 400;
  color: #151b32;
  letter-spacing: -0.03em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.05);
}
.cases-grid-color-text.pos-top-left {
  left: 0.05em;
  top: 0.05em;
  right: auto;
  bottom: auto;
  transform: none;
}
.cases-grid-color-text.pos-top-right {
  left: auto;
  right: 0.05em;
  top: 0.05em;
  bottom: auto;
  transform: none;
}
.cases-grid-color-text.pos-bottom-left {
  left: 0.05em;
  right: auto;
  top: auto;
  bottom: 0.05em;
  transform: none;
}
.cases-grid-color-text.pos-bottom-right {
  left: auto;
  right: 0.05em;
  top: auto;
  bottom: 0.05em;
  transform: none;
}
.cases-grid-color-text.pos-center {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* === BILD STATIC === */
.cases-grid-static-img-box {
  width: 280px;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.15em;
  margin: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

/* Responsive für mobile */
@media (max-width: 900px) {
  .cases-grid-3 {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 3vw 0;
    padding: 37vw 15px 37vw 15px;
    margin-left: 16px;
    margin-right: 16px;
    width: auto;
    box-sizing: border-box;
    
  }
  .cases-grid-item {
    min-width: 120px;
    min-height: 120px;
    max-width: 96vw;
    max-height: 350px;
    margin-bottom: 48px;
    order: var(--mobile-order, initial) !important;
  }
  .cases-grid-color-box {
    width: 92vw;
    height: 52vw;
    max-width: 98vw;
    min-width: 0;
    min-height: 0;
    transition: none;
  }
  .cases-grid-static-img-box {
    width: 92vw;
    height: 52vw;
    max-width: 98vw;
    min-width: 0;
    min-height: 0;
  }
  .cases-grid-color-text,
  .cases-grid-color-text.pos-top-right,
  .cases-grid-color-text.pos-bottom-left,
  .cases-grid-color-text.pos-bottom-right,
  .cases-grid-color-text.pos-center {
    font-size: 18vw;
  }
}

/* === BILD + LINK (Hover-Effekt Desktop) === */
.cases-grid-img-box {
  width: 288px;
  height: 288px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  background: transparent;
  overflow: visible;
  z-index: 1;
  transition:
    width 0.36s cubic-bezier(.68,-0.55,.27,1.55),
    height 0.36s cubic-bezier(.68,-0.55,.27,1.55);
}
.cases-grid-img-bg {
  width: 100%;
  height: 100%;
  background-size: auto;
  background-position: left top;
  background-repeat: no-repeat;
  border-radius: 0.15em;
  box-sizing: border-box;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  filter: none !important;
  pointer-events: none;
  transition:
    width 0.36s cubic-bezier(.68,-0.55,.27,1.55),
    height 0.36s cubic-bezier(.68,-0.55,.27,1.55),
    background-size 0.36s cubic-bezier(.68,-0.55,.27,1.55);
}
.cases-grid-img-box:hover,
.cases-grid-img-box:focus-within {
  width: 360px;
  height: 360px;
}
.cases-grid-img-box:hover .cases-grid-img-bg,
.cases-grid-img-box:focus-within .cases-grid-img-bg {
  filter: none !important;
}

/* Overlay direkt über dem Bild, kleiner, links stark versetzt, engerer Zeilenabstand */
.cases-grid-img-overlay-outside {
  position: absolute;
  left: -32px;
  bottom: 100%;
  margin-bottom: 14px;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s;
  min-width: 180px;
  width: max-content;
  white-space: pre-line;
  background: none;
  box-shadow: none;
  padding: 0;
}
.cases-grid-img-box:hover .cases-grid-img-overlay-outside,
.cases-grid-img-box:focus-within .cases-grid-img-overlay-outside {
  opacity: 1;
  pointer-events: auto;
}
.cases-grid-img-overlay-title {
  color: #3258e0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  margin-bottom: 0.08em;
  text-transform: uppercase;
  display: block;
  line-height: 1.15;
}
.cases-grid-img-overlay-desc {
  color: #222;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  display: block;
  line-height: 1.18;
}

.cases-grid-link,
.cases-grid-link:visited {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}


  @media (max-width: 900px) {
  .cases-grid-item.hide-on-mobile,
  .cases-grid-item[data-hide-mobile="true"] {
    display: none !important;
  }
}

@media (max-width: 900px) {
  /* ...dein bisheriges Grid-CSS... */

  /* Standard: Grid-Item linksbündig */
  .cases-grid-item {
    align-self: flex-start;
  }

  /* Mobil: Grid-Item rechtsbündig wenn mobileAlign = right */
  .cases-grid-item.mobile-align-right {
    align-self: flex-end !important;
  }

  /* Mobil: Grid-Item linksbündig wenn mobileAlign = left */
  .cases-grid-item.mobile-align-left {
    align-self: flex-start !important;
  }
}
  
  .cases-grid-static-img-box,
  .cases-grid-img-box {
    min-width: 286px !important;
    min-width: 286px !important;
    min-width: 286px !important;
    min-height: 286px !important;
    min-width: 286px !important;
    min-width: 286px !important;
  }
  
  .cases-grid-color-text,
  .cases-grid-color-text.pos-top-right,
  .cases-grid-color-text.pos-bottom-left,
  .cases-grid-color-text.pos-bottom-right,
  .cases-grid-color-text.pos-center {
    font-size: 160px;
    /* Desktop-Positions-Styles neutralisieren! */
    left: unset !important;
    right: unset !important;
    top: unset !important;
    bottom: unset !important;
    font-weight: 400;
    transform: none !important;
    font-family: 'PP Neue Montreal', sans-serif;
    /* Mobile-Positionen übernehmen */
    position: absolute !important;
    top: var(--mobile-top, auto) !important;
    left: var(--mobile-left, auto) !important;
    right: var(--mobile-right, auto) !important;
    bottom: var(--mobile-bottom, auto) !important;
  }
}