.postinggoal_usercp-desc {
    max-width: 800px; /* Begrenzte Breite für bessere Lesbarkeit */
    margin: 0 auto 20px auto; /* Zentriert den Text und gibt Abstand nach unten */
    line-height: 1.6; /* Verbessert die Lesbarkeit */
    text-align: justify; /* Optional: Sorgt für saubere Blocksatz-Optik */
}

.postinggoal_usercp_add {
    max-width: 600px; /* Begrenzte Breite für eine bessere Anordnung */
    margin: 0 auto 20px auto; /* Zentrieren + Abstand nach unten */
    padding: 20px;
}

.postinggoal_usercp_add-headline {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.postinggoal_usercp_add-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten für eine saubere Darstellung */
    gap: 15px; /* Abstand zwischen den Feldern */
}

.postinggoal_usercp_add-bit {
    display: flex;
    flex-direction: column;
}

.postinggoal_usercp_add-bit-headline {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.postinggoal_usercp_add-bit-input input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-opac-border);
    border-radius: 5px;
    text-align: center;
}

/* Button Styling */
#postinggoal_postchallenge {
    margin-top: 20px;
    padding: 10px 20px;
    font-weight: bold;
    border: 1px solid var(--color-opac-border);
    border-radius: 5px;
    cursor: pointer;
}

/* Tabellenzeile */
.postinggoal_usercp-challene_past-headline {
    display: table-row;
    width: 100%;
}

/* Tabellenzellen */
.postinggoal_usercp-challene_past-headline-bit {
    display: table-cell;
    text-align: left; /* Links ausgerichtet für besseren Lesefluss */
    vertical-align: middle;
    width: 50%; /* Sorgt für gleichmäßige Spalten */
    border: 1px solid var(--color-opac-border);
}

/* Erste Zeile als Header */
.postinggoal_usercp-challene_past-headline:first-child .postinggoal_usercp-challene_past-headline-bit {
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
    padding: 20px 20px;
    box-sizing: border-box;
    background-image: var(--accent-bg);
    color: var(--color-main3);
    text-align: center; /* Überschriften zentrieren */
}

.postinggoal_challenge-table {
    display: table; /* Macht das div zu einer Tabelle */
    width: 100%; /* Volle Breite nutzen */
    border-collapse: collapse; /* Entfernt Lücken zwischen den Zellen */
    box-sizing: border-box;
    background-color: var(--color-background-opac);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
}

.postinggoal_usercp-bit {
    display: table; /* Macht das div zu einer Tabelle */
    width: 100%; /* Volle Breite nutzen */
    border-collapse: collapse; /* Entfernt Lücken zwischen den Zellen */
    box-sizing: border-box;
    background-color: var(--color-background-opac);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
}

/* Tabellen-Container auf volle Breite setzen */
.postinggoal_challenge-statistic {
    display: table;
    width: 100%; /* Volle Breite nutzen */
    border-collapse: collapse;
    padding: 5px;
    isolation: isolate;
}

/* Tabellenzeile */
.postinggoal_challenge-table-row {
    display: table-row;
    width: 100%; /* Wichtig, damit die Zeilen die volle Breite haben */
}

/* Tabellenzellen */
.postinggoal_challenge-table-cell {
    display: table-cell;
    width: 25%; /* 4 Spalten = 100% */
    padding: 10px;
    border: 1px solid var(--color-opac-border);
    text-align: center;
    vertical-align: middle;
}

/* Tabellenkopf */
.postinggoal_challenge-table-row:first-child .postinggoal_challenge-table-cell {
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--color-accent1);
    background-blend-mode: multiply;
    box-sizing: border-box;
    background-image: var(--accent-bg);
    color: var(--color-main);
    text-align: center;
}

.postinggoal_goalstatus_reached {
    color: green;
    font-weight: bold;
}

.postinggoal_goalstatus_notreached {
    color: red;
    font-weight: bold;
}

/* Der Hauptcontainer für die Fortschrittsanzeige */
.postinggoal_challenge-goals {
    display: flex;
    justify-content: space-between; /* Gleichmäßige Verteilung */
    align-items: center;
    width: 100%;
    margin: 20px 0;
    padding: 15px;
    box-sizing: border-box;
    background-color: var(--color-background-opac);
    background-blend-mode: overlay;
    background-attachment: fixed;
    background-image: var(--accent-bg);
    border: 1px solid var(--color-opac-border);
}

/* Einzelne Fortschrittsblöcke */
.postinggoal_challenge-counter-bit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Alle Elemente haben gleiche Breite */
    padding: 15px;
    border: 1px solid var(--color-opac-border);
    background: var(--color-overlay);
}

/* Erreichte Werte (Anzahl der Posts, Wörter, Zeichen) */
.postinggoal_challenge-count-progress {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-accent1);
    margin-bottom: 5px;
}

/* Zielwerte */
.postinggoal_challenge-count-goal {
    font-size: 14px;
    color: var(--color-main2);
}

/* Container für die Statusmeldung */
.postinggoal_challenge-notice {
    margin-top: 15px;
    padding: 12px 15px;
    border: 1px solid var(--color-opac-border);
    font-size: 14px;
    line-height: 1.5;
}

/* Fehler-Statusmeldung */
.postinggoal_challenge-notice strong {
    color: red;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Allgemeiner Text */
.postinggoal_challenge-notice p {
    margin: 5px 0 0 0;
    color: var(--color-main2);
    font-size: 14px;
}

.postinggoal_index-headline {
    background-color: var(--color-accent1);
    background-attachment: fixed;
    background-image: var(--accent-bg);
    background-blend-mode: multiply;
    padding: 10px;
    color: var(--color-main3);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--main-font);
    margin-bottom: 15px;
}

.postinggoal_index-headline b {
    color: var(--color-accent1);	
}

.postinggoal_index-count-goal {
    margin-top: 10px;
}

.postinggoal_index-counter {
    display: flex;
    flex-wrap: nowrap;
    padding: 10px 0;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0px;
}

.postinggoal_index-counter-bit {
    text-align: center;
}

.postinggoal_index-count-progress {
    font-weight: bold;
    font-size: 20px;
    display: flex;
    justify-content: center;
}

.postinggoal_index-toplist {
    border-top: 1px solid var(--color-opac-border);
    padding: 6px;
    color: var(--color-main);
    text-align: right;
}

.postinggoal_index-toplist a:link,
.postinggoal_index-toplist a:visited,
.postinggoal_index-toplist a:active {
    color: var(--color-main);
    text-decoration: none;
}

.postinggoal_index-toplist a:hover {
    text-decoration: underline;
}

.postinggoal_index-progressbar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    position: relative;
    font-weight: 700;
    font-size: 13px;
}

.postinggoal_index-progressbar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-accent1, transparent) var(--progress, 0%), 
        hsl(0, 0%, 70.2%) var(--progress, 0%) 100%
    );
    mask-image: radial-gradient(transparent 62%, black calc(62% + 0.5px));
}

.postinggoal_toplist-navigation {
    width: 25%;
    background-color: var(--color-accent1);
    background-attachment: fixed;
    background-image: var(--accent-bg);
    background-blend-mode: multiply;
    padding: 40px;
    border-right: 1px solid var(--color-opac-border);
    color: var(--color-main3);
}

.postinggoal_toplist-navigation a {
    color: var(--color-main3);
}

.postinggoal_toplist-navigation a:hover {
    color: var(--color-accent1);
}

.postinggoal_toplist-table {
    display: flex;
    flex-direction: column;
    padding: 1px;
}

/* KORRIGIERTE TABELLEN-STILE */
.postinggoal_toplist-table-row {
    display: flex;
    border-bottom: 1px solid var(--color-main3);
}

/* Header-Zeile - KEIN gap mehr! */
.postinggoal_toplist-table-row.postingoal-header {
    display: flex;
    gap: 0; /* Entfernt das problematische gap: 5px */
}

/* Header-Zellen */
.postinggoal_toplist-table-cell-header {
    flex: 1; /* Gleiche Breite für alle Spalten */
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1em;
    padding: 20px 10px; /* Konsistentes Padding */
    background-color: var(--color-accent1);
    background-attachment: fixed;
    background-image: var(--accent-bg);
    background-blend-mode: multiply;
    color: var(--color-main3);
    text-align: center;
    border-right: 1px solid var(--color-opac-border);
    position: relative;
    z-index: 2;
}

/* Daten-Zellen */
.postinggoal_toplist-table-cell {
    flex: 1; /* Gleiche Breite für alle Spalten */
    padding: 10px; /* Konsistentes Padding */
    color: var(--color-main);
    font-size: 13px;
    text-align: center;
    border-right: 1px solid var(--color-opac-border);
}

/* Letzter Border entfernen */
.postinggoal_toplist-table-cell-header:last-child,
.postinggoal_toplist-table-cell:last-child {
    border-right: none;
}

.postinggoal_toplist-main {
    width: 75%;
    background-blend-mode: multiply;
    background: var(--gate-bg);
    background-color: var(--color-overlay);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    padding: 40px 40px;
    position: relative;
}

.postinggoal_toplist-main::before {
    content: "";
    backdrop-filter: var(--backdrop-filter);
    -webkit-backdrop-filter: var(--backdrop-filter);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

#postinggoal_toplist {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
    isolation: isolate;
}

.postinggoal_toplist-result {
    isolation: isolate;
}

.postinggoal_toplist-headline {
    font-family: var(--display-font);
    color: var(--color-main);
    text-transform: uppercase;
    font-size: 35px;
    letter-spacing: 4px;
    border-bottom: 1px solid var(--color-opac-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
    line-height: 90%;
    text-align: left;	
    isolation: isolate;
}

.postinggoal_toplist-navigation-headline {
    font-family: var(--display-font);
    text-transform: lowercase;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-bottom: 5px;
    border-right: 1px solid var(--color-opac-border);
    display: inline-block;
    font-size: 25px;
    color: var(--color-main3);
}



.postinggoal_toplist-navigation-item {
  position: relative;
  padding: 5px 0;
  font-family: var(--main-font2);
  font-size: 11px;
}

.postinggoal_toplist-navigation-item a {
text-decoration: none;
  transition: all 0.5s ease-in;
  color: var(--color-main3);
  display: block;
  letter-spacing: 0.7px;
  font-weight: 400;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-opac-border);
}

.postinggoal_toplist-navigation-item a:hover {
  text-decoration: none;
  transition: all 0.5s ease-in;
  color: var(--color-accent1);
}