.profil_flex{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  width:700px;
  box-sizing:border-box;
}

/* Kategorien */
.relas{
  width:auto;
  height:auto;
  margin:0;
  background:
    linear-gradient(180deg, #3a2113, #1a0d08);
  border:1px solid rgba(197,139,69,.65);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 14px 25px rgba(0,0,0,.35),
    inset 0 0 25px rgba(234,208,161,.04);
}

.relakat{
  background:
    linear-gradient(90deg, #4a2a17, #2a150c);
  border-bottom:3px solid #c58b45;
  padding:12px 16px 10px;
}

.relakat h3{
  margin:0;
  font-family:Cinzel, Georgia, serif;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#f0c98e;
  text-shadow:1px 1px 0 #000;
}

/* Innenbereich */
.relas_innerbox{
  height:390px;
  overflow:auto;
  padding:14px;
  box-sizing:border-box;
}

/* Tabelle neutralisieren */
.relas_innerbox table,
.relas_innerbox tbody{
  display:block;
  width:100%;
}

.relas_innerbox tr,
.relas_innerbox td{
  display:block;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  text-align:inherit !important;
}

/* Jede Relation als Karte */
.relation_card{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:14px;
  margin-bottom:16px;
  padding:12px;
  background:
    linear-gradient(135deg, rgba(18,8,5,.96), rgba(42,20,11,.96));
  border:1px solid rgba(197,139,69,.55);
  border-radius:12px;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.45),
    0 8px 16px rgba(0,0,0,.25);
}

.rela_avatar{
  grid-column:1;
  grid-row:1;
}

.rela_content{
  display:grid;
  grid-template-columns:1fr;
  grid-column:2;
  grid-row:1;
  min-width:0;
}

.rela_facts2{
  grid-column:1 / -1;
}

/* Avatar */
.rela_avatar img,
.relas_td img{
  width:90px;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid #c58b45;
  background:#0d0604;
  padding:3px;
  box-sizing:border-box;
  filter:sepia(.15) contrast(1.05);
}

/* Inhalt */
.rela_content{
  min-width:0;
}

.relaname{
  margin:0 0 8px;
  padding:8px 10px;
  background:#0d0604;
  border-left:4px solid #c58b45;
  font-family:Cinzel, Georgia, serif;
  font-size:13px;
  line-height:1.35;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#f4d9a8;
  text-align:left;
}

.relaname h7{
  font:inherit;
}

.relaname a{
  color:#f4d9a8;
  text-decoration:none;
}

.relaname a:hover{
  color:#fff0c9;
}

.rela_facts{
  margin:0 0 8px;
  padding:7px 9px;
  background:rgba(197,139,69,.08);
  border:1px solid rgba(197,139,69,.25);
  border-radius:8px;
  color:#d8b37d;
  font-family:Antonio, Arial Narrow, sans-serif;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.3px;
  text-align:center;
}

.rela_facts2{
  height:105px !important;
  overflow:auto;
  padding:8px 9px !important;
  background:rgba(8,3,2,.45);
  border-radius:8px;
  color:#ead0a1;
  font-family:Spectral, Georgia, serif;
  font-size:13px;
  line-height:1.55;
  text-align:justify;
}

/* Edit/Delete-Bereich */
.rela_actions{
  margin-top:8px;
  text-align:center;
}

.rela_actions h1{
  margin:0;
  font-size:13px;
  color:#c58b45;
}

/* Scrollbar */
.relas_innerbox::-webkit-scrollbar,
.rela_facts2::-webkit-scrollbar{
  width:7px;
}

.relas_innerbox::-webkit-scrollbar-track,
.rela_facts2::-webkit-scrollbar-track{
  background:#160b07;
}

.relas_innerbox::-webkit-scrollbar-thumb,
.rela_facts2::-webkit-scrollbar-thumb{
  background:#c58b45;
  border-radius:20px;
}

/* Responsive */
@media(max-width:850px){
  .profil_flex{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .relation_card{
    grid-template-columns:1fr;
  }

  .rela_avatar{
    text-align:center;
  }

  .rela_avatar img,
  .relas_td img{
    width:120px;
    height:150px;
  }

  .relaname{
    text-align:center;
    border-left:0;
    border-top:3px solid #c58b45;
  }
}

.rela_facts2{
  grid-column:1 / -1;
  height:120px !important;
}

.rela_actions{
  grid-column:1 / -1;
}