/* Aus site/snippets/team/grid.php */
.team-grid-section {
  padding-top: 0;
}

.team-about__intro {
  text-align: left;
}

.team-about__intro .section-title {
  margin-top: 0;
}

.member-overlay__link--phone {
  margin-bottom: 0.25rem;
}

.team-member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 2rem;
    }
    .member-card {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: var(--surface-container-low);
      border-radius: 24px; /* Deutlich rundere Ecken wie im Screenshot */
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      scroll-margin-top: 110px;
    }
    .member-card__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .member-card__placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--mist-gray);
      background: var(--surface-container-low);
    }
    .member-card__placeholder span {
      font-size: 4rem;
    }

    /* Standard-Zustand: Weisses Namensbanner unten links */
    .member-card__name-banner {
      position: absolute;
      bottom: 0;
      left: 0;
      background: var(--surface);
      padding: 0.85rem 1.5rem;
      font-weight: 700;
      color: var(--text-main);
      font-size: 1rem;
      z-index: 1;
      border-top-right-radius: 6px;
      transition: opacity 0.2s ease;
    }

    /* Hover-Zustand: Semitransparenter Schleier mit direktem Text-Overlay */
    .member-card__overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Heller, semitransparenter Schleier, damit das Bild im Hintergrund weich durchschimmert */
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      backdrop-filter: blur(1px); /* Optional: Macht den Hintergrund minimal weicher */
      padding: 2.25rem;
      display: flex;
      flex-direction: column;
      justify-content: center; /* Zentriert die Textblöcke vertikal wie im Beispiel */
      align-items: flex-start;
      box-sizing: border-box;
      opacity: 0;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    /* Hover- & Fokus-Logik */
    .member-card:hover .member-card__image {
      transform: scale(1.02);
    }
    .member-card:hover .member-card__name-banner {
      opacity: 0; /* Blendet das Standard-Banner aus */
    }
    .member-card:hover .member-card__overlay,
    .member-card:focus .member-card__overlay,
    .member-card:focus-within .member-card__overlay {
      opacity: 1;
    }

    /* Typografie innerhalb des Overlays */
    .member-overlay__position {
      color: var(--edp-red);
      font-weight: 800;
      font-size: 0.9rem;
      letter-spacing: 0.05em;
      margin-bottom: 0.25rem;
    }
    .member-overlay__name {
      font-size: 2.1rem; /* Schön gross und dominant */
      line-height: 1.15;
      margin: 0 0 1.5rem 0;
      color: var(--text-main);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .member-overlay__link {
      color: var(--on-surface-variant);
      text-decoration: none;
      font-size: 1.05rem;
      line-height: 1.6;
      font-weight: 400;
      transition: color 0.2s ease;
    }
    .member-overlay__link:hover {
      color: var(--edp-red);
    }

    @media (max-width: 600px) {
      .team-member-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .member-card {
        border-radius: 14px;
      }
      .member-card__name-banner {
        width: 100%;
        padding: 0.6rem 0.65rem;
        font-size: 0.86rem;
      }
      .member-card__overlay {
        padding: 0.8rem;
      }
      .member-overlay__position {
        font-size: 0.68rem;
      }
      .member-overlay__name {
        margin-bottom: 0.55rem;
        font-size: 1.05rem;
      }
      .member-overlay__link {
        font-size: 0.74rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
      }
    }