/* =========================================
   LGA — Team Members (LGA Style + Effects)
   ========================================= */

.tmm{
  /* Aliase -> eure Theme-Variablen */
  --tm-bg:      var(--bg);
  --tm-card:    var(--card);
  --tm-text:    var(--text);
  --tm-muted:   var(--muted);
  --tm-border:  var(--border);
  --tm-shadow:  var(--shadow-soft);
  --tm-strong:  0 10px 30px rgba(0,0,0,.25);

  /* LGA Akzente */
  --tm-accent:  var(--fdp-cyan);
  --tm-grad:    linear-gradient(90deg,
                    color-mix(in srgb, var(--fdp-yellow) 80%, transparent) 0%,
                    color-mix(in srgb, var(--fdp-cyan)   80%, transparent) 50%,
                    color-mix(in srgb, var(--fdp-magenta)80%, transparent) 100%);
}

/* ===== Karte / Member ===== */
.tmm .tmm_member{
  position: relative;
  background: var(--tm-card) !important;
  border: 1px solid var(--tm-border) !important;
  border-top-color: transparent !important;           /* wir zeichnen den Balken selbst */
  border-radius: 0px 0px 16px 16px !important;
  box-shadow: var(--tm-shadow) !important;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .22s ease;
  overflow: hidden;                                   /* für Pseudo-Elemente */
}

/* LGA-Gradient-Bar oben, trotz inline style des Plugins */
.tmm .tmm_member::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px;
  background: var(--tm-grad);
  pointer-events:none;
}

/* Leichter Schimmer im Hintergrund */
.tmm .tmm_member::after{
  content:"";
  position:absolute; inset:auto -20% -40% -20%; height:60%;
  background: radial-gradient(50% 60% at 50% 100%,
              color-mix(in srgb, var(--tm-accent) 18%, transparent) 0%,
              transparent 70%);
  opacity:.4; filter: blur(20px);
  pointer-events:none;
}

.tmm .tmm_member:hover{
  transform: translateY(-4px);
  box-shadow: var(--tm-strong);
  border-color: color-mix(in srgb, var(--tm-accent) 35%, var(--tm-border));
}

/* ===== Foto / Avatar ===== */
.tmm .tmm_member .tmm_photo{
  position: relative;
  width: 60%; padding-bottom: 60%;
  margin-top:-30%; margin-left:auto; margin-right:auto;
  border-radius: 28% !important;
  border: 6px solid var(--tm-bg) !important;
  box-shadow: 0 0 0 1px var(--tm-border) inset !important;
  transition: transform .18s ease, box-shadow .22s ease;
  background-size: cover !important;
  background-position: center center !important;
}

/* Gradient-Ring/Glow */
.tmm .tmm_member .tmm_photo::after{
  content:""; position:absolute; inset:-3px;
  border-radius: inherit;
  background: var(--tm-grad);
  opacity:.0; filter: blur(6px);
  transition: opacity .22s ease;
  z-index:-1;
}
.tmm .tmm_member:hover .tmm_photo{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25) inset;
}
.tmm .tmm_member:hover .tmm_photo::after{ opacity:.7; }

/* ===== Textfarben / Typo ===== */
.tmm .tmm_names,
.tmm .tmm_names span,
.tmm .tmm_fname,
.tmm .tmm_lname{ color: var(--tm-text) !important; }

.tmm .tmm_job,
.tmm .tmm_job p{ color: var(--tm-muted) !important; }

/* Name mit zartem Gradient-Underline beim Hover */
.tmm .tmm_names{
  position: relative; display:inline-block; font-weight:700;
}
.tmm .tmm_names::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background: var(--tm-grad); opacity:0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.tmm .tmm_member:hover .tmm_names::after{ opacity:1; transform: translateY(0); }

/* Job als dezentes Badge */
.tmm .tmm_job{
  display:inline-block; margin-top:6px; padding:6px 10px;
  border-radius:999px; border:1px solid var(--tm-border);
  background: color-mix(in srgb, var(--tm-card) 85%, transparent);
  line-height:1; font-weight:600;
}

/* ===== Social-Links ===== */
.tmm .tmm_textblock .tmm_sociallink{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background: var(--tm-card);
  border:1px solid var(--tm-border);
  box-shadow: var(--tm-shadow);
  margin:10px 5px !important;
  transition: transform .15s ease, border-color .18s ease, background .18s ease, box-shadow .22s ease, filter .18s ease;
}
.tmm .tmm_textblock .tmm_sociallink:hover{
  transform: translateY(-3px);
  border-color: var(--tm-accent);
  background: color-mix(in srgb, var(--tm-card) 75%, var(--tm-accent));
  box-shadow: var(--tm-strong);
}
.tmm .tmm_textblock .tmm_sociallink img{ width:18px; height:18px; display:block; filter:none; }
[data-theme="dark"] .tmm .tmm_textblock .tmm_sociallink img{ filter: invert(1) brightness(1.1); }

/* ===== Abstände / Textblock ===== */
.tmm .tmm_member .tmm_textblock{ padding: 14px 16px; }
.tmm .tmm_member .tmm_textblock .tmm_scblock{ padding-top: 10px; }

/* ===== Responsiveness: nur Optik, kein Layout-Break ===== */
@media (max-width: 64em){
  .tmm .tmm_member{ box-shadow: var(--tm-shadow) !important; }
}
@media (prefers-reduced-motion: reduce){
  .tmm .tmm_member,
  .tmm .tmm_member .tmm_photo,
  .tmm .tmm_textblock .tmm_sociallink,
  .tmm .tmm_names::after{ transition: none !important; }
}


/* 1) Avatar darf über die Karte hinausragen */
.tmm .tmm_member{
  overflow: visible !important;           /* war: hidden */
}

/* 2) Name und Rolle: Rolle unter den Namen */
.tmm .tmm_names{
  display: block !important;              /* Name als Block → nächste Zeile frei */
}
.tmm .tmm_job{
  display: block !important;              /* Badge immer darunter */
  margin-top: 8px !important;
}

/* 3) Kleines Feintuning für die Foto-Kapsel,
      damit der „U-Ausschnitt“ harmonisch sitzt */
.tmm .tmm_member .tmm_photo{
  margin-top: -26% !important;            /* leicht weniger stark überlappen */
  border: 6px solid var(--bg) !important; /* sauberer Rand zur Karte */
}

/* 4) Falls einzelne Karten kein Foto haben, Abstand oben angleichen */
.tmm .tmm_member:not(:has(.tmm_photo)) .tmm_textblock{
  padding-top: 18px !important;
}