/* Toolbar leicht angleichen (du hast schon Styles für Select/Buttons) */
.verein-team-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}
.verein-team-toolbar select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  height:42px; line-height:40px; padding:0 36px 0 12px; border-radius:8px;
  border:1px solid #ccd; background:#fff; font:inherit;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23333" d="M1.41 0L6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px;
}

/* Parameter */
.verein-team-wrap{
  --team-gap: 20px;         /* Abstand zwischen Karten */
  --team-cols: 4;           /* maximale Spaltenzahl am Desktop */
  --card-w: 195px;          /* Kartenbreite (so ergeben sich bis zu 4 Spalten) */
}

/* Grid */
.verein-team-grid{
    display: flex;
    flex-wrap: wrap;
    gap: var(--team-gap);
    justify-content: center;  /* <-- zentriert die letzte (unvollständige) Reihe */
    max-width: calc(var(--team-cols) * var(--card-w) + (var(--team-cols) - 1) * var(--team-gap));
    margin-inline: auto;
    /*
    display:grid;
    grid-template-columns: repeat(var(--team-cols, 3), minmax(0,1fr));
    gap: var(--team-gap, 20px);*/
}
@media (max-width: 1024px){ .verein-team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .verein-team-grid{ grid-template-columns: 1fr; } }


/* Feste Kartenbreite, dadurch max. 4 pro Zeile */
.team-card{
  width: var(--card-w);
}

/* Card */
.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0px;
  border-radius:16px;
  line-height: 1.1em;
  /*background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);*/
}
.team-card .avatar{
  width:150px;
  height:150x;
  /*border: 1px solid var(--wp--preset--color--palette-color-2);*/
  border-radius:9999px;
  overflow:hidden;
  margin-bottom:20px;
  background:#f1f1f1;
}
.team-card .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.team-card .role{ font-size:1rem; margin-bottom:4px; }
.team-card .name{ font-size:1rem; margin:0 0 6px; }
.team-card .desc{ font-size:.8rem; color:#aaa; margin-bottom:10px; }
.team-card .contact a{ text-decoration:none; color: var(--wp--preset--color--palette-color-2); }

.team-card .contact { font-size: 75%; }
.team-card .team-gruss { margin-bottom: 1em; }
.team-card .team-lic { margin-bottom: 1em; }
.team-card .team-line { margin:0; }
.team-card .team-mail { margin:0; }
.team-card .team-line .dashicons, .team-card .team-mail .dashicons { margin-right: .25em; color: #aaa; font-size: 1.4em;}
.team-card .team-mail .dashicons { transform: translateY(.15em);}


.team-card .dept{
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #aaa;
  /*color: var(--wp--preset--color--palette-color-2, #0b5f33);*/
}
/* Beispiel: Abteilungs-spezifische Farben möglich */
/*.team-card .dept--tischtennis { color: #0b5f33; }
.team-card .dept--fussball   { color: #1155cc; }
.team-card .dept--leichtathletik   { color: #1155cc; }*/
/* … */

/* Responsiv anpassen */
@media (max-width: 1200px){
  .verein-team-wrap{ --card-w: 240px; }      /* etwas schmalere Karten */
}
@media (max-width: 800px){
  .verein-team-wrap{ --team-cols: 2; }       /* max. 2 Spalten */
  .verein-team-grid{ max-width: none; }      /* volle Breite nutzen */
}
@media (max-width: 560px){
  .team-card{ width: min(420px, 100%); }     /* mobil: einspaltig */
}