.wm-team-by-category { display:block; }
.wm-team-group { margin-bottom: 2.5rem; }
.wm-team-group__title { font-size: 1.5rem; margin: 0 0 1rem; }
.wm-team-grid { display: grid; gap: 1rem; }
.wm-team-by-category[data-columns="2"] .wm-team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wm-team-by-category[data-columns="3"] .wm-team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wm-team-by-category[data-columns="4"] .wm-team-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .wm-team-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .wm-team-grid { grid-template-columns: 1fr !important; } }

.wm-team-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; overflow: hidden; display:flex; flex-direction: column; }
.wm-team-card { position: relative; }
.wm-team-card__contact, .wm-team-card__body a { position: relative; z-index: 2; }
.wm-team-card__image img { width: 100%; height: auto; display:block; }
.wm-team-card__body { padding: 1rem; }
.wm-team-card__name { margin: 0 0 .25rem; font-size: 1.125rem; }
.wm-team-card__positions, .wm-team-card__location { color: #666; font-size: .95rem; }
.wm-team-card__email { margin-top: .25rem; }
.wm-team-card__email a { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; }
.wm-team-card__email a:hover { text-decoration: underline; }
.wm-team-card__email .wm-team-card__email-icon { width: 18px; height: 18px; display: inline-block; fill: currentColor; }
.wm-team-card__contact { margin-top: .5rem; display:flex; flex-wrap: wrap; gap: .5rem .75rem; }
.wm-team-card__contact a { color: inherit; text-decoration: underline; }

.wm-focus-list { display: grid; gap: 1rem; }
.wm-focus-list[data-columns="2"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wm-focus-list[data-columns="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wm-focus-list[data-columns="4"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 989px) { .wm-focus-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .wm-focus-list { grid-template-columns: 1fr !important; } }
.wm-focus-card { border: 1px solid rgba(0,0,0,.08); background:#fff; border-radius:6px; position: relative; overflow: hidden; }
/* Der Button überdeckt die gesamte Karte, damit die ganze Fläche klickbar ist */
.wm-focus-card__btn { position:absolute; inset:0; width:100%; height:100%; display:block; padding: .85rem 1rem; text-align:left; background:transparent; border:0; cursor:pointer; font-weight:600; border-radius: inherit; }
.wm-focus-card__btn:hover { text-decoration: underline; }
/* Aktiver Zustand: Karte ist die geöffnete (Modal sichtbar) */
.wm-focus-card.wm-focus-card--active { border-color: #A80C41; box-shadow: 0 0 0 2px rgba(168,12,65,0.15) inset; }

/* Modal */
.wm-modal {
  position: fixed;
  inset: 0;
  /* sehr hoher z-index, damit immer über Header/Footer/Sticky-Elementen */
  z-index: 2147483647; /* max 32-bit int */
  /* immer im Layout halten, Animationen über opacity/visibility steuern */
  display: flex;
  align-items: center;   /* vertikal zentriert */
  justify-content: center; /* horizontal zentriert */
  padding: 20px; /* Rand für kleine Screens */
  visibility: hidden; /* geschlossen unsichtbar */
}
.wm-modal.is-open { visibility: visible; }
.wm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s ease;
}
.wm-modal.is-open .wm-modal__overlay { opacity: 1; }

.wm-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: 100%;
  background:#fff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 1.25rem 1.25rem 1.5rem;
  max-height: 90vh;        /* bei langen Inhalten scrollbar */
  overflow: auto;
  margin: 0;               /* zentrierung übernimmt Flex-Container */
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.wm-modal.is-open .wm-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wm-modal__close {
  position:absolute;
  top: .5rem;
  right: .5rem;
  border:0;
  background:transparent;
  font-size: 2rem;
  line-height:1;
  cursor:pointer;
}
.wm-modal__title { margin: 0 0 .75rem; font-size: 1.35rem; }
.wm-modal-open { overflow: hidden; }

/* Actions / Buttons im Modal */
.wm-modal__actions { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .5rem; }
.wm-modal__btn { appearance: none; -webkit-appearance: none; border: 1px solid rgba(0,0,0,.15); background: #f3f3f3; color: #222; border-radius: 4px; padding: .5rem .9rem; cursor: pointer; font-weight: 600; }
.wm-modal__btn:hover { filter: brightness(0.96); }
.wm-modal__btn--close { background: #A80C41; border-color: #A80C41; color: #fff; }
.wm-modal__btn--close:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .wm-modal__overlay { transition: none; }
  .wm-modal__dialog { transition: none; transform: none; }
}

/* =========================
   Team-Detailseite – Icon-Ausrichtung neben Text
   ========================= */
/* Adresse, E-Mail und Telefonnummer (in der Kontaktzeile) sollen die SVG-Icons
   horizontal neben dem Text anzeigen und vertikal zentrieren. */
.wm-team-detail .wm-team-detail__header .wm-team-detail__address,
.wm-team-detail .wm-team-detail__header .wm-team-detail__email,
.wm-team-detail .wm-team-detail__header .wm-team-detail__contact-inline .wm-team-detail__phone {
  display: inline-flex;
  align-items: center;       /* vertikale Zentrierung von Icon und Text */
  gap: .5rem;                /* Abstand zwischen Icon und Text */
  line-height: 1.4;
}

/* Einheitliche Icon-Größe und saubere Ausrichtung */
.wm-team-detail .wm-team-detail__header svg {
  width: 20px;
  height: 20px;
  display: block;            /* vermeidet zusätzliche Unterlängen/Baseline-Lücken */
  flex: 0 0 auto;
}

/* Icons in der Detail-Header-Zone sollen die aktuelle Textfarbe übernehmen */
.wm-team-detail .wm-team-detail__header svg,
.wm-team-detail .wm-team-detail__header svg path {
  fill: currentColor;
}

/* Optional: etwas vertikaler Abstand zwischen den Blöcken */
.wm-team-detail .wm-team-detail__header .wm-team-detail__address,
.wm-team-detail .wm-team-detail__header .wm-team-detail__email {
  margin-top: .25rem;
}