/* ===== S.H.I.E.L.D. Memberlist Cards ===== */
:root{
  --ml-bg:#343528;        /* Seitenhintergrund */
  --ml-card:#343528;      /* Kartenfläche */
  --ml-ink:#93946C;       /* Text dunkel */
  --ml-muted:#66674B;     /* Graublau */
  --ml-cyan:#66674B;      /* Akzent hell */
  --ml-blue:#292a20;      /* Akzent dunkel */
  --ml-line:#A4998A;
  --ml-radius:16px;
}

.ml-wrap{
  max-width:min(1200px,96vw);
  margin:26px auto;
  padding:8px;
}
.ml-title{
  color:#93946C;
  text-align:center;
  font:700 32px/1 "Antonio",system-ui,sans-serif;
  letter-spacing:3px;
  margin:0 0 14px;
}

/* Grid für alle Karten */
.shield-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}

/* Karte */
.shield-card{
  background:var(--ml-card);
  border:1px solid var(--ml-line);
  border-radius:var(--ml-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  overflow:hidden;
  position:relative;
  color:var(--ml-ink);
}

/* Kopfzeile */
.card-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
            background: linear-gradient(45deg,#343528,#66674B,#848561);
            color: #A4998A;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.badge{
  width:30px; height:30px; border:2px solid rgba(255,255,255,.8);
  border-radius:50%; display:grid; place-items:center; font-weight:700;
}
.head-title{
  font:800 18px/1 "Antonio",sans-serif; letter-spacing:4px;
}

/* Innenleben */
.card-body{
  position:relative;
  display:grid; grid-template-columns:1fr 150px; gap:12px;
  padding:12px;
}
/* Wasserzeichen-Optik */
.card-body:before{
  content:""; position:absolute; inset:auto 160px 14px 14px;
  opacity:.14; filter:grayscale(1);
  background:
    radial-gradient(circle at 35% 40%, rgba(15,110,161,.35), transparent 58%),
    radial-gradient(circle at 60% 65%, rgba(10,30,46,.45), transparent 60%);
  border-radius:50%; width:180px; height:180px;
}

/* Linke Datenzone */
.left{ position:relative; display:grid; grid-template-columns:70px 1fr; gap:10px; }
.qr{
  width:70px; height:70px; border:2px solid var(--ml-blue); border-radius:6px;
  background:
    conic-gradient(#66674B 0 25%, #A4998A 0 50%, #66674B 0 75%, #A4998A 0),
    conic-gradient(#A4998A 0 25%, #66674B  0 50%, #A4998A 0 75%, #66674B 0);
  background-size:20px 20px; background-position:0 0,10px 10px;
  filter:contrast(1.1);
}
.identity{ display:grid; gap:4px; }
.name{ font:800 18px/1 "Antonio",sans-serif; text-transform:uppercase; letter-spacing:1px; }
.alias{ font:700 11px/1 "Antonio",sans-serif; text-transform:uppercase; letter-spacing:2px; color:var(--ml-muted); }

/* Shortfacts (≈5) */
.facts2{ display:grid; gap:6px; margin-top:6px; }
.fact2{
  display:grid; grid-template-columns:110px 1fr; gap:6px 10px;
  border:1px solid #66674B; border-radius:8px; padding:6px 8px; background:#66674B;
}
.k{ font:700 11px/1 "Antonio",sans-serif; letter-spacing:1px; color:var(--ml-blue); text-transform:uppercase; }
.v{ font:700 13px/1 "Rajdhani",sans-serif; color:#143248; }

/* Foto rechts */
.photo{ width:150px; height:180px; border-radius:12px; border:2px solid #d8e6ef; overflow:hidden; background:#cfe2ee; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Fußzeile */
.card-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-top:1px dashed #66674B; background:#66674B;
}
.serial{ font:700 11px/1 "Antonio",sans-serif; color:#A4998A; letter-spacing:1px; }
.level{
  font:800 11px/1 "Antonio",sans-serif; letter-spacing:2px; text-transform:uppercase;
  background:var(--ml-blue); color:#A4998A; border:1px solid #A4998A; border-radius:999px; padding:4px 10px;
}

/* Buttons */
.actions{ display:flex; gap:8px; }
.btn{
  font:700 11px/1 "Antonio",sans-serif; border:1px solid #b7cdd8; border-radius:8px;
  padding:6px 8px; background:#fff; color:#143248; text-decoration:none;
}
.btn:hover{ border-color:var(--ml-blue); }

/* Responsive */
@media (max-width:420px){
  .card-body{ grid-template-columns:1fr; }
  .photo{ width:100%; max-width:220px; margin:0 auto; }
}


/* exakt zwei Spalten (bricht auf 1 Spalte unter 900px) */
.shield-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media (max-width: 900px){
  .shield-grid{ grid-template-columns: 1fr; }
}

/* Sicherheit: Karten sollen NICHT über beide Spalten spannen */
.shield-card{ grid-column: auto; width: auto; }

/* Falls MyBB noch Tabellen-Markup rendert: flachziehen, damit Grid greift */
.shield-grid table,
.shield-grid tbody,
.shield-grid tr,
.shield-grid td{
  display: contents;   /* macht die Kindelemente zu echten Grid-Items */
}