/*RESERVIERUNG*/

.headline3 {
font-weight: bold;
  font-size: 10px;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--line1);
  padding: 5px;
  text-align: center;
}

.reservation .thead {
background: var(--golden);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}

.reserv_count {
width: 75%;
  margin: 20px auto;
  text-transform: uppercase;
  font-size: 11px;
  text-align: center;
}

.rule_box {
width: 40%;
  line-height: 170%;
}

.res_rule b {
font-weight: bold;
  color: var(--golden);
  font-size: 10px;
  letter-spacing: 1px;
}

.res_rule {
display: flex;
  justify-content: center;
  margin: 40px;
}

.res_kat {
border-bottom: 1px solid var(--golden);
  font-size: 30px;
  font-weight: bold;
  font-family: var(--mainfont);
  text-transform: uppercase;
  color: var(--golden);
  padding: 20px;
  background-image: url(/images/stats_back.png);
  background-position-y: 86%;
  height: 100px;
  display: flex;
  align-items: center;
  padding-left: 60px;
}

.reservation {
width: 85%;
  margin: 50px auto;
  background: var(--paper);
}

/*Fraktionen*/

.faction_mems {
font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faction_memn {
font-size: 10px;
  text-transform: uppercase;
}

.faction_lead {
border-top: 1px solid var(--line1);
  margin-top: 10px;
  padding-top: 5px;
  margin-bottom: 5px;
  font-size: 10px;
  text-transform: uppercase;
}

.create-box h2, .factions-wrap h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
	color:var(--golden);
}

.factions-grid{
display: grid;
  grid-template-columns: repeat(auto-fill,minmax(279px,1fr));
  gap: 10px;
}

.faction-card{
}

.faction-head{display:flex;gap:12px;align-items:center}

.faction-logo{
width: 54px;
  height: 54px;
  object-fit: cover;
}

.faction-name{
font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.faction-meta{font-size:12px;opacity:.8}

.faction-desc{
margin: 10px 0 12px;
  line-height: 170%;
  height: 70px;
  overflow: auto;
	padding-right: 10px;
}

.bars{
	display:flex;
	flex-direction:column;
	gap:3px
}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-label{
	
width: 80px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

.bar-track{
flex: 1;
  height: 5px;
  background: var(--paper);
  overflow: hidden;
}

.bar-fill{height:100%}
.bar-val{width:42px;text-align:right;font-size:12px;opacity:.85}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.badge{
font-size: 9px;
  padding: 3px 6px;
  border: 1px solid var(--golden);
  text-transform: uppercase;
}

.filters{
margin: 30px auto;
}
.filters form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end}

.filters label{
font-size: 10px;
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.filters input,.filters select{
width: 180px;
  padding: 7px;
  border: 1px solid var(--line1);
  background: var(--paper);
}

.filters button{
padding: 8px 10px;
  border: 1px solid var(--golden);
  cursor: pointer;
  background: transparent;
}

.create-box{
}

.create-box h2{margin:0 0 10px}
.create-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:end}
.create-box label{
font-size: 10px;
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.create-box input,.create-box textarea{
width: 230px;
  padding: 7px;
  border: 1px solid var(--line1);
  background: var(--paper);
}

.create-box textarea{
height: 14px;
}

.create-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.create-actions button{
padding: 8px 10px;
  border: 1px solid var(--golden);
  cursor: pointer;
  background: transparent;
}
.note{font-size:12px;opacity:.8;margin-top:6px}
.alert{border:1px solid #f2c;padding:10px;border-radius:10px;margin:0 0 10px;background:#fff0f6}
.ok{border:1px solid #8bc34a;padding:10px;border-radius:10px;margin:0 0 10px;background:#f4fff0}

.small-note{
font-size: 10px;
  margin: 10px 0;
  text-transform: uppercase;
}


/*STERNZEICHEN FÄHIGKEITEN*/
.infopop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: hsla(0, 0%, 0%, 0.5); z-index: 1; opacity:0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; pointer-events: none; } .infopop:target { opacity:1; pointer-events: auto; } 

.infopop > .pop { 
background: var(--paper);
  width: 500px;
  position: relative;
  margin: 10% auto;
  padding: 25px;
  z-index: 3;
  text-transform: none;
  color: var(--fontcolor);
  font-weight: normal;
  line-height: 170%;
} 

.closepop { position: absolute; right: -5px; top:-5px; width: 100%; height: 100%; z-index: 2; }
.tarot-ability-link{
  text-decoration: underline;
  cursor: pointer;
}


.tarot-ability-name {
font-size: 12px;
  text-transform: uppercase;
  color: var(--golden);
  font-weight: bold;
}

.tarot-zodiac h2 {
width:100%;
}

.tarot-abilities {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
	position: relative;
	width:100%;
}

.tarot-zodiac h2 span {
border-bottom: 1px solid var(--golden);
  padding: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 0;
}

.tarot-overview { }
.tarot-zodiac { 
display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tarot-ability {
width: 32.5%;
  border: 1px solid var(--line1);
  padding: 20px;
  box-sizing: border-box;
}

.tarot-ability-head { 
display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line1);
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.tarot-ability-desc { 
margin: 6px 0 10px;
  line-height: 170%;
  height: 100px;
  overflow: auto;
}

.tarot-ability-meta i {
color:var(--golden);
	font-size: 10px;
}

.tarot-ability-meta {
text-transform: uppercase;
  font-size: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-bottom: 5px;
}

.tarot-users { 
font-size: 10px;
  text-transform: uppercase;
  height: 30px;
  overflow: auto;
}

.tarot-muted { opacity: .7; font-size: 12px; }
.tarot-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tarot-stat-wide { grid-column: 1 / -1; }

.tarot-user-empty { 
	opacity: .6; 
}


.user_list {
margin-bottom: 2px;
  font-size: 10px;
  text-transform: uppercase;
}

.ability_name {
font-weight: bold;
  text-transform: uppercase;
  color: var(--golden);
  font-size: 10px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.st_box h2 span {
border-bottom: 1px solid var(--golden);
  padding: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 0;
}

.st_box {
width:24%;
}

.lists_content-block h2 span {
border-bottom: 1px solid var(--golden);
  padding: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-left: 0;}

.lists_content-block h2 {
  font-size: 12px;
  text-transform: uppercase;
	letter-spacing: 1px;
margin-bottom: 20px;
}

.lists {
          width: 85%;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  align-items: flex-start;
  margin: 50px auto;
	padding:1px;
        }
        
        /*         Menu        */
        
        .lists_menu {
			width:20%;
     display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
        }
        
        .lists_menu-head {
        text-align: center;
  font-weight: bold;
  padding: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-image: url(/images/fb_pic.png);
        }
        
        .lists_menu-item {
           margin: auto;
  font-size: 10px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line1);
  padding: 10px;
  width: 80%;
        }
        
        
        /*         Content       */
        
        
        .lists_content {
        width: 80%;
  box-sizing: border-box;
  background: var(--paper);
        }
        
        .lists_content-head {
           border-bottom: 1px solid var(--golden);
  font-size: 30px;
  font-weight: bold;
  font-family: var(--mainfont);
  text-transform: uppercase;
  color: var(--golden);
  padding: 20px;
    padding-left: 20px;
  background-image: url(/images/stats_back.png);
  background-position-y: 86%;
  height: 100px;
  display: flex;
  align-items: center;
  padding-left: 60px;
        }
        
        .lists_content-description {
            padding: 20px 40px;
            text-align: justify;
            line-height: 180%;
        }
        
        .lists_content-bit {    
           background-image: var(--tpaper);
  background-color: var(--paper);
  box-sizing: border-box;
  padding: 50px;
  text-align: justify;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

        }
        
        .lists_content-block {
            width: 45%;    /* Wenn du drei Spalten willst, gib hier 30% an. Beachte, dass du diesen Wert je nach Breite des Forums und des Inhalts anpassen musst, um ein zufriedenstellendes Ergebnis zu erhalten. */
        }
        
        .lists_content-item {
            margin-bottom: 2px;
  font-size: 10px;
  text-transform: uppercase;
        }