/* =========================================
   JJ SERVICES BOXES (jj-svcbox__)
   Hover: grünes Overlay slidet hoch + Text animiert rein
   ========================================= */

.custom .jj-svcbox__root{
  --jj-sb-bg: transparent;
  --jj-sb-ink: #ffffff;
  --jj-sb-muted: rgba(255,255,255,.78);

  /* Overlay-Farbe wie in deinem Screenshot (grün/teal) */
  --jj-sb-accent: rgb(0, 125, 164);

  /* Hero Padding Alignment */
  padding: clamp(32px, 5vw, 74px);
  color: var(--jj-sb-ink);
}

.custom .jj-svcbox__head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.custom .jj-svcbox__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .01em;
  font-size: clamp(1.6rem, 1.2vw + 1.3rem, 2.2rem);
}

/* Grid */
.custom .jj-svcbox__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

/* Card */
.custom .jj-svcbox__card{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);

  text-decoration: none;
  color: inherit;

  min-height: 320px;
  display: grid;
  grid-template-rows: 1fr auto;
}

.custom .jj-svcbox__media{
  display: grid;
  place-items: center;
  padding: 34px 26px;
  background: radial-gradient(circle at top, #1f2933 0%, #0f172a 70%);
}

.custom .jj-svcbox__media img{
  width: min(72%, 260px);
  height: auto;
  max-height: 190px;
  object-fit: contain;
  display:block;
  opacity: .98;
}

/* Bottom label (wie Screenshot: unten dunkler Streifen) */
.custom .jj-svcbox__label{
  padding: 18px 22px 20px;
  background: rgba(0,0,0,.22);
}

.custom .jj-svcbox__label-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .01em;
}

/* Overlay */
.custom .jj-svcbox__overlay{
  position: absolute;
  inset: 0;
  background: var(--jj-sb-accent);
  transform: translateY(100%);
  transition: transform 420ms ease;
  will-change: transform;

  display: grid;
  align-items: end;
}

.custom .jj-svcbox__overlay-inner{
  padding: 22px 22px 24px;
  color: #0b1a14;

  /* Text animiert rein (von oben nach unten) */
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 420ms ease, opacity 420ms ease;
}

.custom .jj-svcbox__kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .75;
  margin: 0 0 10px;
}

.custom .jj-svcbox__h{
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
  margin: 0 0 10px;
}

.custom .jj-svcbox__p{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  opacity: .9;
  max-width: 42ch;
}

.custom .jj-svcbox__cta{
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .95;
}

/* Hover / Focus */
.custom .jj-svcbox__card:hover .jj-svcbox__overlay,
.custom .jj-svcbox__card:focus-visible .jj-svcbox__overlay,
.custom .jj-svcbox__card.is-open .jj-svcbox__overlay{
  transform: translateY(0);
}

.custom .jj-svcbox__card:hover .jj-svcbox__overlay-inner,
.custom .jj-svcbox__card:focus-visible .jj-svcbox__overlay-inner,
.custom .jj-svcbox__card.is-open .jj-svcbox__overlay-inner{
  transform: translateY(0);
  opacity: 1;
}

/* Focus ring */
.custom .jj-svcbox__card:focus{
  outline: none;
}
.custom .jj-svcbox__card:focus-visible{
  box-shadow: 0 0 0 3px rgba(47,95,120,.55), 0 18px 45px rgba(0,0,0,.25);
  border-color: rgba(47,95,120,.75);
}

/* Responsive */
@media (max-width: 1100px){
  .custom .jj-svcbox__grid{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 640px){
  .custom .jj-svcbox__root{
    padding: 22px 16px;
  }
  .custom .jj-svcbox__grid{
    grid-template-columns: 1fr;
  }
  .custom .jj-svcbox__card{
    min-height: 300px;
  }
}