* {
    border: 0px;
    border-radius: 0px;
    box-sizing: border-box;
    color: white;
    font-family: "Twemoji Country Flags", Inter, sans-serif;
    margin: 0px;
    padding: 0px;
}

:root {
  /* Grundfarben */
  --dark-grayblue: #000b1f;
  --light-grayblue: #1f2937;
  --mid-grayblue: #252e3b;
  --lighter-grayblue: #464e5a;

  /* Buttons */
  --button-bg: #2c3444;
  --button-hover: #464e5a;

  /* Tabellen */
  --table-text: #ffffff;
  --table-header: #dddddd;
  --table-border-strong: #444444;
  --table-border-light: #333333;

  /* Hintergrund dunkel */
  --bg-dark: #1f2937; /* rgb(31,41,55) in Hex */

  /* Fraktionen */
  --horde: #b34d50;   /* rgb(179,77,80) */
  --allianz: #4980f8; /* rgb(73,128,248) */

  /* Statusfarben */
  --status-yes: #059669;       /* rgb(5,150,105) */
  --status-no: #b34d50;        /* rgb(179,77,80) */
  --status-partial-dark: #1d4633; /* rgb(29,70,51) */

  /* Klassenfarben */
  --class-1: #c69b6d;
  --class-2: #f48cba;
  --class-3: #aad372;
  --class-4: #fff468;
  --class-5: #f0ebe0;
  --class-6: #c41e3b;
  --class-7: #2359ff;
  --class-8: #68ccef;
  --class-9: #9382c9;
  --class-10: #00ffba;
  --class-11: #ff7c0a;
  --class-12: #a330c9;
  --class-13: #33937f;

  /* Itemfarben */
  --HEIRLOOM: #00ccff;
  --ARTIFACT: #e5cc80;
  --EPIC: #9345ff;
  --RARE: #0070dd;
  --UNCOMMON: #1eff00;
  --COMMON: #ffffff;
  
}

body {
    background-color: var(--dark-grayblue);
}

h3 {
  padding: 10px;
}

.main {
    display: grid;
    padding-left: 90px;
}

#nav {
    display: flex;
    flex-direction: column;    
    align-items: start;
    background: var(--light-grayblue);
    gap: 1rem;
    justify-content: flex-start;
    height: 100%;
    left: 0px;
    padding: 1rem;
    position: fixed;
    top: 0px;
    z-index: 3;
    width: 90px;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    background-color: rgba(60,60,60,0.95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 4px 10px;
    position: absolute;
    left: 50%;
    bottom: 0%; /* darüber anzeigen, ggf. anpassen */
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.2s;
    pointer-events: none;
    font-size: 0.9rem;
}

/* Kein "position: fixed" für das Untermenü, nur normales flex-Design */
#character-submenu {
    position: fixed;
    top: 0;
    /* Abstand genau so breit wie das Hauptmenü, z.B. 7.6rem */
    left: 90px;
    height: 100%;
    background: var(--mid-grayblue);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    justify-content: flex-start;
    padding: 1rem 0.5rem 1rem 0.5rem;
    z-index: 2; /* Damit es über dem Content, aber UNTER nav liegt */
}

#character-content{
  padding-left: 90px;
}

.menubutton, .char-menubutton {
    background-color: var(--button-bg);
    cursor: pointer;
    border-radius: 10px;
    display: grid;
    place-items: center;    
}

.menubutton {
    position: relative; /* für absolut positionierte tooltips */
}

.menubutton:hover {
    background-color: var(--button-hover);
}

.menubutton:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.menubutton img{
  border-radius: 10px;
  border: 2px solid var(--dark-grayblue);
}

#content {
    align-content: start;
    display: grid;
    padding-right: 15px;
}

table.updates {
  width: auto;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--table-text);
  background: none;
}

table.updates th {
  color: var(--table-header);    
  text-align: left;
  padding: 8px;
  font-weight: 600;
  border-bottom: 2px solid var(--table-border-strong);
}

table.updates td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--table-border-light);
}

table.updates tr:hover td {
  background-color: rgba(255,255,255,0.05);
}

table.updates tr:last-child td {
  border-bottom: none;
}

.flex-container {
  align-content: start;
  display: grid;
  gap: 2rem;
  padding-left: 1rem;
}

.flex-container-slim {
  align-content: start;
  display: grid;
  gap: 0rem;
  padding-left: 1rem;
}

.flex-container .updates {
  flex: 1;
  width: 100%;
}

.Headline {
  align-items: center;
  background: var(--bg-dark);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
  height: 3rem;
  padding: 0.4rem;  
  text-decoration: none;  
}

.SiteHeader {
  padding-top: 1rem;
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.SubSiteHeader {  
  height: 3rem;
  padding-top: 1rem;
  padding-left: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;  
  border-bottom: 0.1rem solid var(--bg-dark);
}

.ContainerTitle {
  padding: 5px 0 5px 1rem;
}

.ContainerSep {
  padding: 10px 0 10px 0;
}

.sectionrow6 {
  display: grid;
  gap: 0.2rem;
  grid-template-columns: 12rem repeat(auto-fill, minmax(6rem, 1fr));
}

.sectionrow18 {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.sectionrow26 {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
}

.sectioncolumns23 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
}

.sectioncolumns30 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
}

.sectioncolumns40 {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr));
}

.column {
  flex: 1;
  width: 100%;
}

.displayitem {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: 1fr auto auto;
  margin: 0.2rem;
  max-width: 400px;
}

.displayitemlink {
  align-items: center;
  background: var(--bg-dark);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
  height: 3rem;
  padding: 0.4rem;  
  text-decoration: none;
}

.displayimage {
  background-position: center center;
  background-size: cover;
  border-radius: 0.4rem;  
}

.displaytext{
  display: grid;
  gap: 0.2rem;
  margin-left: 0.2rem;
}

.displaytitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: small;
}

.displaysubtitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: x-small;
}

.displaysubtitle.Horde {
  color: var(--horde);
}

.displaysubtitle.Allianz {
  color: var(--allianz);
}

.complete {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.3rem;
  height: 3rem;
  width: 1.2rem;
}

.complete.yes {
  background: var(--status-yes);
}

.complete.no {
  background: var(--status-no);
}

/* Character */

.characteritem {
  align-items: center;
  background: var(--bg-dark);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  height: 5rem;
  padding: 0.5rem;
  margin: 0.2rem;
  text-decoration: none;
  cursor: pointer;
}

.characterimage {
  background-position: center center;
  background-size: cover;
  border-radius: 0.4rem;
  height: 58px;
  width: 115px;
}

.charactertext{
  display: grid;
  gap: 0.2rem;
  margin-left: 0.2rem;
}

.charactertitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: small;
}

.charactertitle.hidden {
  display: none !important;
}

.charactersubtitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: x-small;
}

/* Remix */

.remixitem {
  display: grid;
  gap: 0.1rem;
  grid-template-columns: 1fr auto auto;
  margin: 0.2rem;
  max-width: 100%;
}

.remixitemlink {
  align-items: center;
  background: var(--bg-dark);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr 1fr 12fr;
  height: 5rem;
  padding: 0.4rem;  
  text-decoration: none;
}

.remiximage {
  background-position: center center;
  background-size: cover;
  border-radius: 0.4rem;
  height: 58px;
  width: 115px;
}

.remixtext{
  display: grid;
  gap: 0.2rem;
  margin-left: 0.2rem;
}

.remixtitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: small;
}

.remixsubtitle {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: x-small;
}

.displaygearlink {
  align-items: center;
  background: var(--bg-dark);
  border-radius: 0.4rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: auto 1fr auto;
  height: 3rem;
  padding: 0.4rem;  
  text-decoration: none;
}

.displaygearimg {
  background-position: center center;
  background-size: cover;
  border-radius: 0.4rem;  
}

/* LevelProgressbar */

.remixlevel {
  display: grid;
  grid-template-columns: repeat(80, 1fr);
  gap: 5px;
  width: 100%;
}

.segment {
  height: 2.5rem;
  border-radius: 5px;
  background: var(--status-partial-dark);
}

.segment.full {
  background: var(--status-yes);
}

.segment.partial {
  background: linear-gradient(
    to right,    
    var(--status-yes) var(--rested, 0%),
    var(--status-partial-dark) var(--rested, 0%)
  );
}

.displaygearlvlHEIRLOOM { color: var(--HEIRLOOM);}
.displaygearlvlARTIFACT { color: var(--ARTIFACT);}
.displaygearlvlEPIC { color: var(--EPIC);}
.displaygearlvlRARE { color: var(--RARE);}
.displaygearlvlCOMMON { color: var(--COMMON);}
.displaygearlvlUNCOMMON { color: var(--UNCOMMON);}

/* Klassenfarben */

.classcolor1 { color: var(--class-1); }
.classcolor2 { color: var(--class-2); }
.classcolor3 { color: var(--class-3); }
.classcolor4 { color: var(--class-4); }
.classcolor5 { color: var(--class-5); }
.classcolor6 { color: var(--class-6); }
.classcolor7 { color: var(--class-7); }
.classcolor8 { color: var(--class-8); }
.classcolor9 { color: var(--class-9); }
.classcolor10 { color: var(--class-10); }
.classcolor11 { color: var(--class-11); }
.classcolor12 { color: var(--class-12); }
.classcolor13 { color: var(--class-13); }

.characterpage {
    display: flex;
    gap: 2rem;

}

.character-menu {
    width: 200px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--light-grayblue);
    padding: 1rem;
    border-radius: 0.4rem;
}

.character-content {
    flex: 1;
}

.level80 {
  color: gold;
}