/* Layouts allgemein */
.vmhb-team-single { margin: 1rem 0; position: relative; }
.vmhb-team-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vmhb-card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.vmhb-card > a { display: block; text-decoration: none; color: inherit; }

/* Medienbereich */
.vmhb-media { position: relative; overflow: hidden; border-radius: 12px; background: #0f0f0f; }
.vmhb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay unten */
.vmhb-overlay-bottom { position: absolute; inset: auto 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
}
.vmhb-overlay-bottom--lg { height: 35%; }
.vmhb-overlay-bottom--md { height: 30%; }

/* Text-Layer */
.vmhb-text-layer { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2; color: #fff; line-height: 1.25; }
.vmhb-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem 0; }
.vmhb-subtitle { opacity: .9; font-size: .95rem; }

/* Badge (Logo) */
.vmhb-badge { position: absolute; top: .75rem; right: .75rem; z-index: 5; border-radius: 9999px; overflow: hidden; background: #fff; opacity: .9; }
.vmhb-badge--lg { width: 72px; height: 72px; }
.vmhb-badge--md { width: 56px; height: 56px; }
.vmhb-badge--sm { width: 30px; height: 30px; }
.vmhb-badge img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9999px; }

/* Trainer-Grid & Avatare */
.vmhb-trainer-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vmhb-avatar { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #fafafa; margin-bottom: .5rem; }

/* Meta unter dem Bild */
.vmhb-card-meta { padding: .65rem; color: #666; }

/* vCard */
.vmhb-vcard {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 1rem;
  text-align: center;
  display: grid;
  gap: .75rem;
}
.vmhb-vcard__avatar {
  width: 128px;
  height: 128px;
  border-radius: 9999px;
  overflow: hidden;
  background: #fafafa;
  margin: 0 auto;
}
.vmhb-vcard__avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vmhb-vcard__name { font-weight: 700; font-size: 1.05rem; }
.vmhb-vcard__meta { color: #666; font-size: .95rem; }
.vmhb-vcard__roles { color: #444; font-size: .9rem; }
.vmhb-vcard__actions {
  display: flex; justify-content: center; gap: .5rem; margin-top: .25rem; flex-wrap: wrap;
}
.vmhb-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border: 1px solid #e5e7eb; border-radius: 9999px;
  background:#fff; color:#111; text-decoration:none; font-weight:600; font-size:.92rem;
}
.vmhb-btn:hover { background:#f9fafb; }
.vmhb-btn i { font-size: 1rem; line-height: 1; }
.vmhb-grid-vcards {
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


/* etwas engere Subtitel in Cards */
.vmhb-subtitle { line-height: 1.35; }

/* Grid bricht früher, bessere Dichte */
@media (max-width: 420px) {
  .vmhb-team-grid { grid-template-columns: 1fr; }
  .vmhb-grid-vcards { grid-template-columns: 1fr; }
}

/* Utility: Screenreader-only (z.B. für reine Icon-Buttons) */
.vmhb-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Trainingszeiten */
.vmhb-tz-wrap { display: grid; gap: .5rem; }
.vmhb-tz {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: .75rem 1rem;
  display: grid;
  gap: .25rem;
}
.vmhb-tz__line1,
.vmhb-tz__line2,
.vmhb-tz__months { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.vmhb-tz__time { font-weight: 700; }
.vmhb-tz__weekday { font-weight: 700; }
.vmhb-tz__title { color: #111; }
.vmhb-tz__hall { color: #444; }
.vmhb-tz__addr { color: #666; }

/* stark transparent für „Monate“ wenn kein Wert gesetzt ist */
.vmhb-dim-90 { opacity: .1; }

/* Monate-Leiste */
.vmhb-months { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.vmhb-month {
  padding:.2rem .45rem; border-radius:.35rem;
  background:#f3f4f6; color:#111; font-weight:600; font-size:.8rem;
  letter-spacing:.02em;

.vmhb-gender .fa-mars   { color: #1e3a8a; } /* blau für männlich */
.vmhb-gender .fa-venus  { color: #be123c; } /* rot/rosa für weiblich */
.vmhb-gender .fa-venus-mars { color: #047857; } /* grün für gemischt */