/* ==========================================================
   DUST IN THE WIND 2.0
   POSTINGGOAL – MONATSÜBERSICHT
   ========================================================== */

.postinggoal_index{
  --pg-bg:#100805;
  --pg-panel:#160d08;
  --pg-panel-soft:#24140c;
  --pg-line:#5a341d;
  --pg-line-soft:rgba(197,139,69,.22);
  --pg-gold:#c58b45;
  --pg-gold-light:#e0b36a;
  --pg-text:#ead0a1;
  --pg-muted:#c8a878;

  position:relative;
  isolation:isolate;

  width:100%;
  margin:18px auto;
  padding:0;

  overflow:hidden;

  color:var(--pg-text);

  background:
    linear-gradient(
      110deg,
      rgba(197,139,69,.045),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #120906,
      #24140c 65%,
      #170b07
    );

  border:1px solid rgba(197,139,69,.38);
  border-left:5px solid var(--pg-gold);

  border-radius:0;

  box-shadow:
    0 14px 30px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.02);

  box-sizing:border-box;
}

.postinggoal_index,
.postinggoal_index *{
  box-sizing:border-box;
}

.postinggoal_index:before{
  content:"MONTHLY RECORD";

  position:absolute;
  right:14px;
  bottom:8px;
  z-index:-1;

  color:rgba(234,208,161,.025);

  font-family:Antonio,Arial,sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1;

  letter-spacing:4px;

  pointer-events:none;
}

/* Überschrift */

.postinggoal_index-headline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;

  padding:13px 16px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(
      90deg,
      rgba(197,139,69,.08),
      transparent 55%
    ),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;
  border-radius:0;
}

.postinggoal_index-headline:after{
  content:"POSTING GOAL";

  color:rgba(234,208,161,.16);

  font-family:Antonio,Arial,sans-serif;
  font-size:8px;
  font-weight:700;
  line-height:1;

  letter-spacing:2px;
  text-transform:uppercase;
}

.postinggoal_index-headline h4{
  margin:0;
  padding:0;

  color:inherit;

  font-family:Cinzel,Georgia,serif;
  font-size:18px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:.8px;
  text-transform:uppercase;
}

/* Zählerbereich */

.postinggoal_index-counter{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;

  padding:14px;

  background:transparent;
  border:0;

  align-items:stretch;
}

/* Einzelner Zähler */

.postinggoal_index-counter-bit{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:11px;
  align-items:center;

  min-width:0;
  min-height:82px;

  padding:11px 12px;

  text-align:left;

  background:rgba(8,4,3,.40);

  border:1px solid rgba(197,139,69,.18);
  border-top:2px solid #8a4e22;
}

/* Fortschrittszahl */

.postinggoal_index-count-progress{
  display:flex;
  align-items:center;
  justify-content:flex-start;

  margin:0;

  color:var(--pg-text);

  font-family:Antonio,Arial,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:.8px;
}

/* Kreisdiagramm */

.postinggoal_index-progressbar{
  position:relative;

  display:grid;
  place-items:center;

  width:58px;
  height:58px;
  min-width:58px;

  color:var(--pg-gold-light);

  font-family:Antonio,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;

  border-radius:50%;

  background:#120805;

  box-shadow:
    inset 0 0 0 1px rgba(197,139,69,.14),
    0 8px 16px rgba(0,0,0,.22);
}

.postinggoal_index-progressbar::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:50%;

  background:
    conic-gradient(
      var(--pg-gold-light) 0,
      var(--pg-gold-light) var(--progress,0%),
      #4b2a18 var(--progress,0%),
      #4b2a18 100%
    );

  -webkit-mask:
    radial-gradient(
      transparent 60%,
      #000 61%
    );

  mask:
    radial-gradient(
      transparent 60%,
      #000 61%
    );
}

.postinggoal_index-progressbar span,
.postinggoal_index-progressbar strong{
  position:relative;
  z-index:1;
}

/* Texte innerhalb der Zähler */

.postinggoal_index-counter-bit h1,
.postinggoal_index-counter-bit h2,
.postinggoal_index-counter-bit h3,
.postinggoal_index-counter-bit h4,
.postinggoal_index-counter-bit p{
  margin:0;
  padding:0;
}

.postinggoal_index-counter-bit small{
  display:block;

  margin-top:4px;

  color:#a98761;

  font-family:Antonio,Arial,sans-serif;
  font-size:8px;
  font-weight:700;
  line-height:1.25;

  letter-spacing:1.2px;
  text-transform:uppercase;
}

/* Toplisten-Link */

.postinggoal_index-toplist{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  min-height:42px;

  padding:9px 14px;

  color:var(--pg-muted);
  background:#160d08;

  border-top:1px solid rgba(197,139,69,.22);
  border-radius:0;

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:.9px;
  text-align:right;
  text-transform:uppercase;
}

.postinggoal_index-toplist a:link,
.postinggoal_index-toplist a:visited,
.postinggoal_index-toplist a:active{
  display:inline-flex;
  align-items:center;

  min-height:27px;

  padding:5px 9px;

  color:var(--pg-muted);

  background:#24140c;

  border:1px solid rgba(197,139,69,.24);

  text-decoration:none;
}

.postinggoal_index-toplist a:hover{
  color:var(--pg-text);

  background:#3a2416;
  border-color:var(--pg-gold);

  text-decoration:none;
}

/* Tablet */

@media screen and (max-width:850px){

  .postinggoal_index-counter{
    grid-template-columns:1fr;
  }

  .postinggoal_index-counter-bit{
    grid-template-columns:64px minmax(0,1fr);
  }
}

/* Smartphone */

@media screen and (max-width:520px){

  .postinggoal_index-headline{
    align-items:flex-start;
    flex-direction:column;
  }

  .postinggoal_index-counter{
    padding:10px;
  }

  .postinggoal_index-counter-bit{
    grid-template-columns:54px minmax(0,1fr);
  }

  .postinggoal_index-progressbar{
    width:50px;
    height:50px;
    min-width:50px;
  }

  .postinggoal_index-toplist{
    justify-content:center;
    text-align:center;
  }
}


/* ==========================================================
   DUST IN THE WIND 2.0
   POSTINGGOAL – TOPLIST, USERCP & CHALLENGES
   ========================================================== */

#postinggoal_toplist,
#postinggoal_usercp{
  --pg-bg:#100805;
  --pg-panel:#160d08;
  --pg-panel-soft:#24140c;
  --pg-line:#5a341d;
  --pg-line-soft:rgba(197,139,69,.22);
  --pg-gold:#c58b45;
  --pg-gold-light:#e0b36a;
  --pg-text:#ead0a1;
  --pg-muted:#c8a878;
  --pg-danger:#b86f4b;
  --pg-success:#9aa66f;
}

/* ==========================================================
   TOPLIST – GRUNDLAYOUT
   ========================================================== */

#postinggoal_toplist{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:18px;
  width:100%;
  align-items:start;
}

/* Navigation links */

.postinggoal_toplist-navigation{
  width:100%;
  padding:0;
  overflow:hidden;

  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent),
    var(--pg-panel-soft);

  border:1px solid rgba(197,139,69,.35);
  border-left:5px solid var(--pg-gold);

  border-radius:0;

  box-shadow:
    0 14px 28px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.02);
}

.postinggoal_toplist-navigation-headline{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:52px;
  width:100%;
  padding:10px 12px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.08),transparent 58%),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;
  border-radius:0;

  font-family:Cinzel,Georgia,serif;
  font-size:13px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:1px;
  text-align:center;
  text-transform:uppercase;
}

.postinggoal_toplist-navigation-item{
  display:flex;
  align-items:center;

  width:100%;
  min-height:38px;

  margin:0;
  padding:8px 12px;

  color:var(--pg-muted);
  background:rgba(8,4,3,.34);

  border-bottom:1px solid rgba(197,139,69,.12);

  box-sizing:border-box;

  font-family:Antonio,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.35;

  letter-spacing:.8px;
  text-transform:uppercase;
}

.postinggoal_toplist-navigation-item:last-child{
  border-bottom:0;
  border-radius:0;
}

.postinggoal_toplist-navigation-item a{
  display:block;
  width:100%;

  color:var(--pg-muted);
  text-decoration:none;
}

.postinggoal_toplist-navigation-item:hover{
  color:var(--pg-text);
  background:#3a2416;

  box-shadow:inset 3px 0 var(--pg-gold);
}

.postinggoal_toplist-navigation-item:hover a{
  color:var(--pg-text);
}

/* Hauptbereich */

.postinggoal_toplist-main{
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;

  background:
    linear-gradient(110deg,rgba(197,139,69,.04),transparent 42%),
    linear-gradient(135deg,#120906,#24140c 65%,#170b07);

  border:1px solid rgba(197,139,69,.35);
  border-left:5px solid var(--pg-gold);

  border-radius:0;

  box-shadow:
    0 14px 30px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.02);
}

.postinggoal_toplist-headline{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:58px;
  width:100%;
  padding:12px 16px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.08),transparent 58%),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;
  border-radius:0;

  font-family:Cinzel,Georgia,serif;
  font-size:24px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:1px;
  text-align:center;
  text-transform:uppercase;
}

.postinggoal_toplist-result{
  padding:14px;

  color:var(--pg-text);
  background:transparent;

  border:0;
  border-radius:0;

  text-align:justify;
}

/* ==========================================================
   TOPLIST – TABELLE
   ========================================================== */

.postinggoal_toplist-table{
  display:flex;
  flex-direction:column;

  width:100%;
  padding:0;
  overflow:hidden;

  border:1px solid rgba(197,139,69,.20);
  border-radius:0;
}

.postinggoal_toplist-table-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));

  width:100%;

  color:var(--pg-text);
  background:rgba(8,4,3,.34);

  border-bottom:1px solid rgba(197,139,69,.14);
}

.postinggoal_toplist-table-row:nth-child(even):not(.header){
  background:rgba(36,20,12,.42);
}

.postinggoal_toplist-table-row:hover:not(.header){
  background:rgba(58,36,22,.68);
}

.postinggoal_toplist-table-row.header{
  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.08),transparent 58%),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;
  border-radius:0;

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;

  letter-spacing:1px;
  text-transform:uppercase;
}

.postinggoal_toplist-table-row:last-child{
  border-bottom:0;
  border-radius:0;
}

.postinggoal_toplist-table-cell{
  min-width:0;
  padding:9px 10px;

  border-right:1px solid rgba(197,139,69,.12);

  font-family:Spectral,Georgia,serif;
  font-size:12px;
  line-height:1.45;

  text-align:center;
}

.postinggoal_toplist-table-cell:last-child{
  border-right:0;
}

.postinggoal_toplist-table-cell a{
  color:var(--pg-gold-light);
  text-decoration:none;
}

.postinggoal_toplist-table-cell a:hover{
  color:#f3ddb9;
}

/* Statusfarben */

.postinggoal_goalstatus_reached{
  color:var(--pg-success);
  font-weight:700;
}

.postinggoal_goalstatus_notreached{
  color:var(--pg-danger);
  font-weight:700;
}

.postinggoal_smalltext{
  color:#a98761;

  font-family:Antonio,Arial,sans-serif;
  font-size:10px;
  line-height:1.4;

  letter-spacing:.5px;
}

/* ==========================================================
   USERCP – GRUNDLAYOUT
   ========================================================== */

#postinggoal_usercp{
  position:relative;

  width:100%;
  margin:0 auto;
  padding:0;
  overflow:hidden;

  color:var(--pg-text);

  background:
    linear-gradient(110deg,rgba(197,139,69,.04),transparent 42%),
    linear-gradient(135deg,#120906,#24140c 65%,#170b07);

  border:1px solid rgba(197,139,69,.35);
  border-left:5px solid var(--pg-gold);

  border-radius:0;

  box-shadow:
    0 14px 30px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.02);
}

.postinggoal_usercp-headline{
  padding:13px 16px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.08),transparent 58%),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;

  font-family:Cinzel,Georgia,serif;
  font-size:16px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:.8px;
  text-transform:uppercase;
}

.postinggoal_usercp-headline:first-child{
  border-radius:0;
}

.postinggoal_usercp-desc{
  padding:20px 26px;

  color:var(--pg-text);
  background:rgba(8,4,3,.28);

  border:0;
  border-bottom:1px solid rgba(197,139,69,.14);

  font-family:Spectral,Georgia,serif;
  font-size:13px;
  line-height:1.7;

  text-align:justify;
}

.postinggoal_usercp-bit{
  padding:14px;

  color:var(--pg-text);
  background:transparent;

  border-radius:0;
}

.postinggoal_usercp-bit center{
  padding:10px 0;
}

/* ==========================================================
   USERCP – ZIELE HINZUFÜGEN
   ========================================================== */

.postinggoal_usercp_add{
  padding:0 0 14px;

  background:transparent;
}

.postinggoal_usercp_add-headline,
.postinggoal_challenge-headline{
  padding:10px 14px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.07),transparent 60%),
    var(--pg-panel);

  border-top:1px solid rgba(197,139,69,.20);
  border-bottom:1px solid rgba(197,139,69,.20);

  font-family:Antonio,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:1.2px;
  text-transform:uppercase;
}

.postinggoal_usercp_add-container{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;

  width:auto;
  margin:14px;
}

.postinggoal_usercp_add-bit{
  width:100%;
  min-width:0;
  padding:0;

  text-align:center;

  background:rgba(8,4,3,.34);

  border:1px solid rgba(197,139,69,.16);
}

.postinggoal_usercp_add-bit-headline{
  padding:8px 10px;

  color:var(--pg-muted);
  background:#160d08;

  border-bottom:1px solid rgba(197,139,69,.16);

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;

  letter-spacing:.9px;
  text-transform:uppercase;
}

.postinggoal_usercp_add-bit-input{
  margin:8px;
}

.postinggoal_usercp_add-bit input,
.postinggoal_usercp_add-bit select,
.postinggoal_usercp_add-bit textarea{
  width:100%;
  max-width:100%;

  padding:8px 9px;

  color:var(--pg-text);
  background:#160d08;

  border:1px solid rgba(197,139,69,.25);
  border-radius:0;

  box-sizing:border-box;
}

/* ==========================================================
   CHALLENGES – FORTSCHRITT
   ========================================================== */

.postinggoal_challenge-goals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;

  padding:14px;
}

.postinggoal_challenge-counter-bit{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  width:100%;
  min-height:88px;
  padding:12px;

  color:var(--pg-text);
  background:rgba(8,4,3,.34);

  border:1px solid rgba(197,139,69,.16);
  border-top:2px solid #8a4e22;

  text-align:center;
}

.postinggoal_challenge-count-progress{
  display:flex;
  justify-content:center;

  color:var(--pg-gold-light);

  font-family:Antonio,Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:.8px;
}

.postinggoal_challenge-notice{
  padding:9px 12px;

  color:var(--pg-muted);
  background:rgba(8,4,3,.24);

  border-top:1px solid rgba(197,139,69,.12);
  border-bottom:1px solid rgba(197,139,69,.12);

  font-family:Antonio,Arial,sans-serif;
  font-size:10px;
  line-height:1.45;

  letter-spacing:.5px;
  text-align:center;
  text-transform:uppercase;
}

.postinggoal_challenge-statistic{
  padding:14px;
}

/* ==========================================================
   CHALLENGE-TABELLE
   ========================================================== */

.postinggoal_challenge-table{
  display:flex;
  flex-direction:column;

  width:100%;
  overflow:hidden;

  border:1px solid rgba(197,139,69,.20);
  border-radius:0;
}

.postinggoal_challenge-table-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));

  width:100%;

  color:var(--pg-text);
  background:rgba(8,4,3,.34);

  border-bottom:1px solid rgba(197,139,69,.14);
}

.postinggoal_challenge-table-row:nth-child(even):not(.header){
  background:rgba(36,20,12,.42);
}

.postinggoal_challenge-table-row.header{
  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.08),transparent 58%),
    var(--pg-panel);

  border-bottom:2px solid #8a4e22;

  font-family:Antonio,Arial,sans-serif;
  font-size:9px;
  font-weight:700;

  letter-spacing:1px;
  text-transform:uppercase;
}

.postinggoal_challenge-table-row:last-child{
  border-bottom:0;
}

.postinggoal_challenge-table-cell{
  min-width:0;
  padding:9px 10px;

  border-right:1px solid rgba(197,139,69,.12);

  font-family:Spectral,Georgia,serif;
  font-size:12px;
  line-height:1.45;

  text-align:center;
}

.postinggoal_challenge-table-cell:last-child{
  border-right:0;
}

/* ==========================================================
   VERGANGENE CHALLENGES
   ========================================================== */

.postinggoal_usercp-challene_past-headline{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  width:100%;
}

.postinggoal_usercp-challene_past-headline-bit{
  width:100%;
  padding:10px 12px;

  color:var(--pg-gold-light);

  background:
    linear-gradient(90deg,rgba(197,139,69,.07),transparent 60%),
    var(--pg-panel);

  border-top:1px solid rgba(197,139,69,.20);
  border-bottom:1px solid rgba(197,139,69,.20);

  font-family:Antonio,Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1.3;

  letter-spacing:1px;
  text-align:center;
  text-transform:uppercase;
}

.postinggoal_usercp-challene_past-headline-bit + 
.postinggoal_usercp-challene_past-headline-bit{
  border-left:1px solid rgba(197,139,69,.16);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (max-width:900px){

  #postinggoal_toplist{
    grid-template-columns:1fr;
  }

  .postinggoal_toplist-navigation{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .postinggoal_toplist-navigation-headline{
    grid-column:1 / -1;
  }

  .postinggoal_toplist-navigation-item{
    justify-content:center;
    text-align:center;

    border-right:1px solid rgba(197,139,69,.12);
  }

  .postinggoal_usercp_add-container,
  .postinggoal_challenge-goals{
    grid-template-columns:1fr;
  }
}

@media screen and (max-width:600px){

  .postinggoal_toplist-navigation{
    grid-template-columns:1fr;
  }

  .postinggoal_toplist-navigation-item{
    border-right:0;
  }

  .postinggoal_toplist-table,
  .postinggoal_challenge-table{
    overflow-x:auto;
  }

  .postinggoal_toplist-table-row,
  .postinggoal_challenge-table-row{
    min-width:620px;
  }

  .postinggoal_usercp-desc{
    padding:16px;
  }

  .postinggoal_usercp_add-container{
    margin:10px;
  }

  .postinggoal_usercp-challene_past-headline{
    grid-template-columns:1fr;
  }

  .postinggoal_usercp-challene_past-headline-bit + 
  .postinggoal_usercp-challene_past-headline-bit{
    border-left:0;
    border-top:0;
  }
}