/* =========================================================
   VELMOOR – MITGLIEDER (Wrap / Sidebar / Results / Cards)
   ========================================================= */

/* -------- Layout: Wrap / Sidebar / Results -------- */
.vm-ml-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin:10px;
}

.vm-ml-sidebar{
  width:320px;
  position:sticky;
  top:12px;
}

.vm-ml-results{
  flex:1;
  min-width:0;
}

/* -------- Generic Card Shell (Sidebar + Intro-Boxen) -------- */
.vm-ml-card{
  overflow:hidden;
  color: var(--text);
  border: 1px solid var(--line2);
  background: radial-gradient(at 55% 45%, rgba(210, 179, 107, 0.10), rgba(0, 0, 0, 0.35)), var(--bg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  border-radius:14px; /* fehlte teils – sorgt für Konsistenz */
}

.vm-ml-cardhead{
  padding:12px 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}

.vm-ml-cardbody{
  padding:12px 14px;
}

/* Sidebar Hero (Bild) */
.vm-ml-hero img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  margin-bottom:12px;
}

/* Form */
.vm-ml-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vm-ml-label{
  font-size:12px;
  opacity:.85;
  margin-top:4px;
}

.vm-ml-input{
  width:100%;
}

.vm-ml-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.vm-ml-reset{
  font-size:12px;
  opacity:.8;
  text-decoration:none;
}

/* -------- List Container -------- */
.vm-ml-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}


/* =========================================================
   VELMOOR – MEMBER LIST CARD (vm-mlc)
   Ziel: weniger wuchtig, keine Überschneidungen,
         Klappentext integriert
   ========================================================= */

/* -------- Card Base -------- */
.vm-mlc{
  display:flex;
  align-items:stretch;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;

  color: var(--text);
  border: 1px solid var(--line2);
  background: radial-gradient(at 55% 45%, rgba(210,179,107,.07), rgba(0,0,0,.30)), var(--bg);
  box-shadow: 0 12px 28px rgba(0,0,0,.40); /* weniger „Wucht“ */
}

/* -------- Avatar Column -------- */
.vm-mlc-ava{
  width:104px;
  flex:0 0 104px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;

  padding:10px;
  border-radius:12px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.06);
  text-decoration:none;
}

.vm-mlc-ava img{
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  display:block;

  border: 1px solid rgba(213, 170, 67, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.42);
}

/* Stars under avatar */
.vm-mlc-stars{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2px;
  font-size:12px;
  line-height:1;
  opacity:.95;
  overflow:hidden;
}

/* -------- Main -------- */
.vm-mlc-main{
  flex:1;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:8px;

  padding:2px 0;
}

/* Top line: Name + Mini stats block */
.vm-mlc-top{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.vm-mlc-namewrap{
  flex:1;
  min-width:0;
}

/* Name */
.vm-mlc-name{
  font-size:16px;
  font-weight:900;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -------- Klappentext (Profilfeld) -------- */
.vm-mlc-blurb{
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  opacity:.84;

  /* Clamp -> stabil */
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

/* Wenn das Feld leer ist: keine Lücke */
.vm-mlc-blurb:empty{display:none;}

/* Right mini area */
.vm-mlc-mini{
  flex:0 0 230px;
  min-width:230px;

  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;

  opacity:.95;
}

.vm-mlc-stat{
  display:flex;
  gap:6px;
  font-size:11px;
  white-space:nowrap;
}

.vm-mlc-group{opacity:.9;}

/* Label/Value */
.vm-mlc-k{
  opacity:.70;
  flex:0 0 auto;
}

.vm-mlc-v{
  opacity:.95;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -------- Meta Grid (2 columns, 2 rows) -------- */
.vm-mlc-metaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 12px;

  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

.vm-mlc-meta{
  display:flex;
  gap:8px;
  min-width:0;
  font-size:12px;
}

/* -------- Tags (Rasse/Beruf/Familie) -------- */
.vm-mlc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}

.vm-mlc-chip{
  font-size:11px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(213,170,67,.26);
  background: rgba(0,0,0,.14);
  white-space:nowrap;
}

.vm-mlc-chip b{
  opacity:.8;
  margin-right:6px;
}

/* -------- Actions (right) -------- */
.vm-mlc-act{
  width:132px;
  flex:0 0 132px;

  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;

  padding:10px;
  border-radius:12px;
  background: rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.06);
}

.vm-mlc-btn{
  display:block;
  text-align:center;
  text-decoration:none;

  padding:8px 10px;
  border-radius:12px;

  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  font-weight:800;
}

.vm-mlc-btn--main{
  border-color: rgba(213,170,67,.55);
  background: rgba(10,12,12,.48);
}

/* -------- Responsive -------- */
@media (max-width: 900px){
  .vm-ml-wrap{
    flex-direction:column;
  }

  .vm-ml-sidebar{
    width:100%;
    position:static;
    top:auto;
  }

  .vm-mlc{
    flex-wrap:wrap;
  }

  .vm-mlc-mini{
    flex:1 1 100%;
    min-width:0;
    justify-content:flex-start;
  }

  .vm-mlc-act{
    width:100%;
    flex:1 1 100%;
    flex-direction:row;
  }

  .vm-mlc-btn{flex:1;}
}