/* Tooltip / Sprechblase */
.teamheader-bit_infos {
  position: absolute;
  top: 20%;                 /* vertikal mittig am Avatar */
  left: 60%;               /* etwas rechts neben dem Avatar */
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9;
}
.teamheader-bit_infos a{
  font-size: 12px;
  line-height:90%;
}
/* Sprechblasen-Dreieck (nach links zeigend) */
.teamheader-bit_infos::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px; /* direkt an der linken Seite */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #333 transparent transparent;
}

/* Tooltip anzeigen, wenn man über das Avatar fährt */
.teamheader-bit_avatar:hover + .teamheader-bit_infos {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(5px);
}

/* --- Grundlayout (optional, für Reihenanordnung) --- */
.teamheader-bit_teamie {
  position: relative; /* wichtig für Tooltip-Positionierung */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 10px;
}

/* Avatar */
.teamheader-bit_avatar {
  width: 100px;
  height: 70px;
  overflow: hidden;
  margin-bottom: 0px; 
  border:3px solid #7e6171;
}
.teamheader-bit_avatar img {
  width: 100%;
  height: 100%;
 object-fit: cover;
}

/* Tooltip anzeigen beim Hover über Avatar */
.teamheader-bit_avatar:hover + .teamheader-bit_infos {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}

/**/
.headerteambox {
  display: flex;
  justify-content: space-between; /* gleichmäßiger Abstand */
  align-items: flex-start;
  flex-wrap: nowrap;              /* KEIN Umbruch – alle in einer Zeile */
  gap: 15px;                      /* Lücke zwischen den Boxen */
  margin: -28px auto;
  max-width: 1200px;              /* Gesamtbreite */
  overflow-x: auto;               /* Falls zu schmaler Bildschirm → horizontal scrollen */
  padding: 10px;
}

/* Jedes der vier Elemente */
.teamheader-bit_teamie {
  flex: 0 0 3%;                  /* genau 4 pro Zeile (100 / 4 ≈ 25 %) */
  display: flex;
  flex-direction: column;         /* Bild oben, Text unten */
  align-items: center;
  text-align: center;
  padding: 10px;
  transition: transform 0.2s ease;
}

