/* Block: Organon Teammodul (acf/team) */

.section--team {
  padding-bottom: 100px;
}

/* 4er-Grid; eine unvollständige Reihe (z. B. nur 3) wird zentriert */
.team {
  --team-gap: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px var(--team-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.team__member {
  flex: 0 0 calc((100% - 3 * var(--team-gap)) / 4);
  margin: 0;
  padding: 0;
}

.team__image {
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
  background: #ededed;
  overflow: hidden;
}

.team__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.bg--gray-light .team__image {
  background: #fff;
}

.team__name {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}

.team__position {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-hellgrau);
}

.team__links {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.team__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

.team__links a:hover,
.team__links a:focus-visible {
  background: var(--color-gold);
  color: #fff;
}

.team__links svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Hover */
.team__image {
  position: relative;
}

.team__image img {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.team__image::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.team__name {
  transition: color .2s;
}

.team__links a {
  transition: background-color .2s, color .2s, transform .2s;
}

@media (hover: hover) {
  .team__member:hover .team__image img {
    transform: scale(1.05);
  }

  .team__member:hover .team__image::after {
    transform: scaleX(1);
  }

  .team__member:hover .team__name {
    color: var(--color-gold);
  }

  .team__links a:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team__image img,
  .team__image::after,
  .team__links a {
    transition: none;
  }

  .team__member:hover .team__image img,
  .team__links a:hover {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .team {
    --team-gap: 30px;
  }

  .team__member {
    flex-basis: calc((100% - var(--team-gap)) / 2);
  }
}

@media (max-width: 540px) {
  .team__member {
    flex-basis: 100%;
  }
}