:root {
  --highlight: #bc9070;
  --highlightlight: #c3b7b7;}
    :root { --hell: #f4f1ef; --dunkel: #e8e4e2; --hellweak: #76706d; --dunkeldunkel: #3a3636; --accent1: #d8b835; --schwarz: #0f0f0f;
--order:#b48425;--death: #2c2c2c;--no: #624386; --wizard: #64938f;--muggle: #437ec3;--student: #b65a8e;--crea: #766654; --ohne: #b0b0b0; }
    
    body {background: var(--hell);}
    .gd_body {width: 550px; margin: auto; background: #f7f7f7; font-family: arial; font-size: 12px; border-left: 0px solid #535353; border-right: 0px solid #535353;}
    .gd_content { padding: 50px; text-align: justify; letter-spacing: 0.3pt; line-height: 21px; color: #846a6a; }
    .gd_cat, .gd_cat2 {text-transform: uppercase; font-weight: bold; font-size: 10px; display: flex; color: #ceaa8e; margin-bottom: 20px;}
    .gd_cat::before {height: 1px; flex-grow: 1; content:''; background-color: #ceaa8e; margin: 10px 10px 0px 0px;}
    .gd_cat2::after {height: 1px; flex-grow: 1; content:''; background-color: #ceaa8e; margin: 10px 0px 0px 10px;}
   
    .gd_question {  font-family: 'Cabin', sans-serif; text-transform: uppercase; font-size: 10px; letter-spacing: 1pt; float: left; margin-right: 5px; color: var(--highlightlight); }
    .gd_question::after {content:' || '}
    .gd_answer {font-family: 'Cabin', sans-serif; font-size: 11px; letter-spacing: 0.3px; color: var(--highlight); font-weight: bold;}
    .gd_answer::after {height: 1px; flex-grow: 1; content:''; background-color: var(--highlightlight); margin: 10px 0px 0px 10px;}
    .gd_desc {margin: 10px 0px 20px 0px; font-size: 11px;}
    .gd_desc2::before {content: '-------------------------'; letter-spacing: -1px; margin-right: 5px; color: #cdaa90;}
    
    .gd_kat {font-family: 'Cabin', sans-serif; text-align: center; letter-spacing: 1px; text-transform: uppercase; color: #bebebe; font-size: 8px; font-style: italic; margin: 10px 0px 30px 0px; padding-top: 10px;}
    .gd_katbig { font-family: 'Andada Pro', serif;font-size: 15px; font-weight: 800; font-style: normal; color: #685757; letter-spacing: 3px; display: flex;}
    .gd_katbig::before {height: 1px; flex-grow: 1; content:''; background-color: var(--highlightlight); margin: 10px 10px 0px 0px;}
    .gd_katbig::after {height: 1px; flex-grow: 1; content:''; background-color: var(--highlightlight); margin: 10px 0px 0px 10px;}
    
    
    .gd_kat2 {font-family: 'Andada Pro', serif; text-align: justify; letter-spacing: 1px; text-transform: uppercase; color: #bebebe; font-size: 8px; font-style: italic; margin: 20px 0px 30px 60px; padding-left: 10px; border-left: 10px solid var(--highlightlight);}
    .gd_katbig2 { font-family: 'Andada Pro', serif;font-size: 15px; font-weight: 800; font-style: normal; color: #685757; letter-spacing: 3px; display: flex;}
    .gd_katbig2::after {height: 1px; flex-grow: 1; content:''; background-color: var(--highlightlight); margin: 10px 0px 0px 10px;}
     
    .gd_icon img { width: 150px; border-radius: 90px; }
    .gd_icon {border-right: 1px solid var(--highlightlight); padding: 10px 30px 20px 0px; margin: 0px 30px 0px 0px; float: left;}
    
    .gd_details {display: flex;}
    
    .gd_banner1 {text-align: center; border-bottom: 0px solid var(--highlightlight); margin-bottom: 30px;}
    .gd_banner2 {background: #323232; color: #EED6C4; text-align: center; padding: 40px; border-top: 10px solid #bd906e;}
    .gd_name { text-align: center; font-size: 30px; text-transform: uppercase; letter-spacing: 1px; padding: 20px 10px 0px 10px;font-family: 'Cabin', sans-serif;border-top: 5px solid var(--highlightlight);}
    
    .gd_linkleiste { text-align: center; padding: 10px 0px 20px 0px;}
    .gd_navi { display: inline-block; padding: 10px; border: 1px solid var(--highlightlight);}
    .gd_navi a, .gd_body a { text-decoration: none; color:  var(--highlightlight); text-transform: uppercase; font-size: 9px; }
    .gd_navi:hover { opacity: 0.5;}
    .gd_quote {font-family: 'Cabin', sans-serif; text-align: center; letter-spacing: 1px; text-transform: uppercase; color: var(--highlightlight); font-size: 7px; font-style: italic; padding: 3px 10px 10px 10px; line-height: 12px;}



/* Wrapper */
.sbv_around {
  background: var(--tbl-main-tr2);
  border: 1px solid var(--tbl-main-tr3);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.sbv_content {
  align-items: start;
}

/* Avatar-Box */
.sbv_icon2 {
  background: var(--tbl-main-tr);
  border: 1px solid var(--tbl-main-tr3);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbv_icon2 img {
  height: auto;
  object-fit: cover;
}

/* Name / Headline – optisch wie .player-header */
.sbv_name2 {
  grid-column: 1 / -1;
  background: var(--tbl-main-tr);
  border: 1px solid var(--tbl-main-tr3);
  padding: 10px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--txtxl);
  letter-spacing: .3em;
  font-family: var(--akzenttext);
}

/* Factline – Kartenraster wie player-meta-grid */
.sbv_factline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
}
.sbv_fact {
  background: var(--tbl-main-tr);
  border: 1px solid var(--tbl-main-tr3);
  padding: 8px;
  text-align: center;
  font-size: var(--txtxsmall);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sbv_fact_text {
  color: var(--design);
  font-weight: 700;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
}

/* Fließtexte – wie playerdirectory_* cards */
.sbv_text {
  background: var(--tbl-main-tr2);
  border: 1px solid var(--tbl-main-tr3);
  padding: 10px;
  text-align: justify;
  font-size: var(--txtsmall);
  line-height: 1.6;
}

/* Kategorie-Kopf + Card */
.sbv_cat {
  background: var(--tbl-main-tr2);
  border: 1px solid var(--tbl-main-tr3);
  padding: 0;
}
.sbv_cat_headline {
  background: var(--tbl-main-tr);
  border-bottom: 1px solid var(--tbl-main-tr3);
  padding: 8px 10px;
  font-size: var(--txtm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--design);
  text-align: center;
  letter-spacing: .12em;
}

/* Timeline – dezente Linke-Leiste */
.sbv_timeline {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--tbl-main-tr3);
  display: grid;
  gap: 6px;
  font-size: var(--txtxsmall);
}
.sbv_timeline b {
  display: block;
  color: var(--design);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sbv_timeline i {
  display: block;
  opacity: .9;
}

/* Footer-Banner – wie meta-bar */
.sbv_banner_bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}
.sbv_textbottom {
  background: var(--tbl-main-tr);
  border: 1px solid var(--tbl-main-tr3);
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--txtxsmall);
  text-transform: uppercase;
}
.sbv_questbottom {
  color: var(--design);
  font-weight: 700;
  border: 1px solid var(--hairline);
  padding: 2px 6px;
  letter-spacing: .06em;
}

/* Inline-Links konsistent (falls im Text) */
.sbv_text a,
.sbv_cat a {
  color: var(--akzent-hell2);
  text-decoration: none;
  border-bottom: 1px dashed var(--hairline);
}
.sbv_text a:hover,
.sbv_cat a:hover {
  color: var(--design);
  border-bottom-color: var(--design);
}

/* Optional: Charactername (falls im SBV genutzt) */
.charactername {
  font-family: var(--akzenttext);
  font-size: var(--txtsmall);
  letter-spacing: .1em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Responsive – wie eure Mobile-Regeln */
@media only screen and (max-width: 568px) {
  .sbv_content {
    grid-template-columns: 1fr;
  }
  .sbv_icon2 {
    max-width: 220px;
    margin: 0 auto;
  }
  .sbv_factline {
    grid-template-columns: 1fr 1fr;
  }
  .sbv_banner_bottom {
    grid-template-columns: 1fr;
  }
}