.profil_flex{
display: flex;
flex-wrap: wrap;
}
.relaname {
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

.relaname a{
    text-transform: uppercase;
    text-align: center;
}
.relas{
width: 48%;
height: 330px;
margin: 5px;
}

.relas_td img{
width: 100px;
    height: auto;
}

.relas_innerbox{
height: 300px;
    overflow: auto
}

.relas_innerbox::-webkit-scrollbar {
width:6px;
}

.relas_innerbox::-webkit-scrollbar-track-piece {
background-color:#010313;
}

.relas_innerbox::-webkit-scrollbar-thumb:vertical {
height:10px;
background-color:#141311;
}

.relation{
height: 200px;
overflow: auto;
}

.relakat{
    background: #5a1b16;
    color: #BAB5B5;
    border-bottom: 1px solid #5a1b16;
    padding: 8px;
    font-weight: bold;
    font-family: antonio; 
    font-size: 18px;
}

.rela_facts{

color: #333;
font-size: 11px;
text-decoration: none;
display: inline;
text-transform: uppercase;
font-weight: 600;
}  
		
		

/* ====== RELATION CARDS – Burgundy + Noir ====== */

/* Überschrift */
.relaname{
  text-transform: uppercase;
  text-align:center;
  font: 800 14px/1 Antonio, sans-serif;
  letter-spacing: 2px;
  color: #fff;
  margin: 18px 0 8px;
}

/* Grid */
.rel-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1100px;
  margin: 14px auto 30px;
  padding: 0 12px;
}

/* Karte */
.relation-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03));
  border:1px solid #5a1b16;                 /* Rahmen */
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.relation-card:hover{
  transform: translateY(-2px);
  border-color: #BAB5B5;                    /* Hover */
  box-shadow: 0 16px 40px rgba(20,19,17,.35);
}

/* Header (= relakat) */
.rel-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #5a1b16;
  background:#5a1b16;
}
.rel-title{
  margin:0;
  font: 800 13px/1 Antonio, sans-serif;
  letter-spacing: 2px; text-transform: uppercase;
  color:#BAB5B5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rel-title .user{ color:#fff; }             /* Name weiß */

/* Shortfacts */
.rel-shortfacts{ display:flex; flex-wrap:wrap; gap:6px; }
.rel-shortfacts .chip{
  font:700 10px/1 Antonio; text-transform:uppercase; letter-spacing:1px;
  color:#BAB5B5; border:1px solid #5a1b16;
  border-radius:999px; padding:4px 8px;
  background:#010313;                       /* Noir */
}

/* Body */
.rel-body{
  display:grid; grid-template-columns: 96px 1fr;
  gap:12px; padding:12px; align-items:flex-start;
}
.rel-avatar img{
  width:96px; height:96px; object-fit:cover;
  border-radius:10px; border:1px solid #5a1b16;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.rel-desc{
  background:#010313;
  border:1px solid #5a1b16;
  border-radius:10px;
  padding:10px;
  min-height:72px; max-height:140px; overflow:auto;
  text-align:justify; font-size:13px; color:#BAB5B5;
}
/* Scrollbar wie vorgegeben */
.rel-desc::-webkit-scrollbar{ height:6px; width:6px; }
.rel-desc::-webkit-scrollbar-thumb{ background:#141311; }
.rel-desc::-webkit-scrollbar-track{ background:#010313; }

/* Aktionen */
.rel-actions{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid #5a1b16;
}
.rel-actions a,
.rel-actions button{
  text-decoration:none; cursor:pointer;
  border-radius:10px; padding:6px 10px;
  border:1px solid #5a1b16;
  background:#010313;
  color:#BAB5B5;
  font:700 11px/1 Antonio; letter-spacing:1px; text-transform:uppercase;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rel-actions a:hover,
.rel-actions button:hover{
  transform: translateY(-1px);
  border-color:#BAB5B5;
  box-shadow: 0 8px 24px rgba(20,19,17,.35);
}
.rel-actions .primary{
  background:#5a1b16; color:#fff; border-color:#5a1b16;
}

/* Responsive */
@media (max-width: 420px){
  .rel-body{ grid-template-columns: 72px 1fr; gap:10px; }
  .rel-avatar img{ width:72px; height:72px; }
}