html, body {
    height: 100%; /* Wichtig für das Ausdehnen des Körpers */
    margin: 0;
    padding: 0;
}

.inner-wrap {
    min-height: 100%; /* Nimmt mindestens den ganzen Viewport ein, kann aber länger werden */
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1; /* Dehnt sich aus, um verfügbaren Raum einzunehmen */
}



/* Grundlegende Stile */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #2a2d34; /* Dunkler Hintergrund, passend zum Rahmen */
}

#challenge-form {
    background-color: rgba(4, 30, 66, 0.8); 
     /* Restliche Stile beibehalten */
     color: #f4e6d7;
     /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
       position: relative; /* Für die Positionierung des Inhalts */
       
       /* border-image anpassen */
       border: 50px solid transparent; /* Passen Sie diese Breite an die Breite Ihres Rahmens an */
       border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 30% round; /* Slice-Wert und fill für nahtlose Kanten */
       /* Hier ist '30' ein geschätzter Wert; Sie müssen vielleicht mit diesem Wert experimentieren */
       border-bottom: 80px solid transparent;
       border-top: 80px solid transparent;
       /* Die border-radius Eigenschaft entfernen */
       border-image-outset: 5 px;
       margin-bottom:20px;
}

#challenge-form label {
    display: block;
    margin-bottom: 10px;
    color: #f4e6d7;
}

#challenge-form input[type="text"],
#challenge-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #f4e6d7;
    background-color: #041E42;
    color: #f4e6d7;
}

#challenge-form input[type="radio"] {
    margin-right: 5px;
}

#challenge-form button {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background-color: #041E42;
    color: #f4e6d7;
    border: 1px solid #f4e6d7;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size:16px;
}

#challenge-form button:hover {
    background-color: #f4e6d7;
}

/* Stil für die Modus-Auswahl */
#mode-selection {
    margin-bottom: 15px;
}

#mode-selection label {
    margin-right: 10px;
    cursor: pointer;
}

/* Stil für die Punktauswahl */
#points-selection label {
    margin-right: 10px;
    cursor: pointer;
}

/* Grundlegende Formular- und Label-Stile, wie zuvor definiert */

/* Container für die Radiobutton-Gruppe */
.radio-group {
    display: flex;
    margin-bottom: 15px; /* Abstand zum nächsten Element */
    flex-wrap: wrap;
    justify-content:space-evenly;
}


.radio-group > div {
    flex-basis: 50%; /* Jedes <div> nimmt 50% der Breite ein, also zwei pro Zeile */
}
/* Stil für Labels, die wie Schaltflächen aussehen */
.radio-group label {
    padding: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    margin: 0; /* Entfernt den Standardabstand */
    border: 2px solid #f4e6d7; /* Dunkelbraun, ähnlich wie WoW-Interface */
    background-color: #041E42; /* Dunkelgrau für den WoW-Stil */
    color: #f4e6d7; /* Helles Beige, häufig in WoW-Textelementen verwendet */
    box-shadow: 0 2px 0 #000; /* Außenschatten für den nicht ausgewählten Zustand */
    transition: all 0.3s ease;
    user-select: none;
    width:33%;
}

/* Entfernt den Zwischenraum zwischen den Schaltflächen */
.radio-group label + label {
    border-left: none;
}

/* Hover-Effekt */
.radio-group label:hover {
    background-color: #292929; /* Etwas helleres Grau für Hover */
}

/* Stil, wenn Radiobutton ausgewählt ist */
.radio-group input[type="radio"]:checked + label {
    background-color: #ffd001; /* Dunkelbraun für den eingedrückten Zustand */
    color: white!important;
    box-shadow: inset 0 2px 0 #000; /* Innenschatten für den eingedrückten Zustand */
    border-color: grey; /* Noch dunklerer Braunton für den Rand */
    position: relative;
    top: 2px; /* Simuliert das Eindrücken */
}

/* Verstecke die Standard-Radiobuttons */
.radio-group input[type="radio"] {
    display: none;
}


/* Modal Style */
/* Modal-Dialog Stil */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6)!important;
}

.modal-content {
    background-color: rgba(4, 30, 66, 0.8) !important; 
    /* Restliche Stile beibehalten */
    color: #f4e6d7 !important;
    border: 50px solid transparent !important; /* Passen Sie diese Breite an die Breite Ihres Rahmens an */
    border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 30% round !important; /* Slice-Wert und fill für nahtlose Kanten */
    /* Hier ist '30' ein geschätzter Wert; Sie müssen vielleicht mit diesem Wert experimentieren */
    border-bottom: 80px solid transparent;
    border-top: 80px solid transparent;
    /* Die border-radius Eigenschaft entfernen */
    border-image-outset: 5 px;

    margin: 15% auto;

 
    width: 80%;
    max-width: 500px;
}

.close-button {
    color: #f4e6d7;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closebeendet-button {
    color: #f4e6d7;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: #041E42;
    text-decoration: none;
    cursor: pointer;
}
.closebeendet-button:hover,
.closebeendet-button:focus {
    color: #041E42;
    text-decoration: none;
    cursor: pointer;
}


/* Challenge seite */
.challenges-container {
    margin: 20px auto;
}

/* Challenge Box Style */
/*.challenge-box2 {
    background-color: rgba(4, 30, 66, 0.8); 
    /* Restliche Stile beibehalten */
 /*   color: #f4e6d7;
  /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
 /*   position: relative; /* Für die Positionierung des Inhalts */
    
    /* border-image anpassen */
 /*   border: 50px solid transparent; /* Passen Sie diese Breite an die Breite Ihres Rahmens an */
  /*  border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 30% round; /* Slice-Wert und fill für nahtlose Kanten */
    /* Hier ist '30' ein geschätzter Wert; Sie müssen vielleicht mit diesem Wert experimentieren */
  /*  border-bottom: 80px solid transparent;
    border-top: 80px solid transparent;
    /* Die border-radius Eigenschaft entfernen */
  /*  border-image-outset: 5 px;
    margin-bottom:20px;
} */

/* ALT */
.challenge-box2 {
    background-color: rgba(4, 30, 66, 0.8);
    color: #f4e6d7;
    position: relative;
    border: 20px solid transparent; /* Erhöhen Sie diesen Wert entsprechend der Dicke Ihres Rahmenbildes */
    border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 100 round; /* Erhöhen Sie den slice-Prozentwert */
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    margin-bottom: 20px;
    background-clip: padding-box;
}



.challenge-box2 > * {
    /* Stellen Sie sicher, dass das Innen-padding größer ist als die Breite des Rahmens */
  /*  padding: 50px; /* 5px mehr als die Rahmenbreite, um sicherzustellen, dass der Rahmen sichtbar bleibt */
}
.challenge-box h3, .challenge-box p {
    color: #f4e6d7;
}

/* Innerhalb des Challenge-Box-Layouts */
.challenge-content {
    display: flex;
    flex-direction: column;
}

.challenge-header {
    padding: 0.5em;
    border-bottom: 1px solid #f4e6d7;
    display: flex;
    align-items: center; /* Zentriert die Inhalte vertikal */
    justify-content: space-evenly; /* Verteilt die Inhalte gleichmäßig */
}


.challenge-description {
    padding: 0.5em;
    border-bottom: 1px solid #f4e6d7;
    flex-grow: 1; /* Ermöglicht es, den verfügbaren Platz zu nutzen */
}

.challenge-details {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
}

.challenge-details .details-row {
    display: flex;
}

.challenge-details .details-row .details-column {
    flex: 1;
    /*margin: 0.5em;*/
    padding: 0.5em;
}

.challenge-details .details-row .details-column.half-width {
    flex: 0 0 50%;
    padding: 0.5em;
}

.challenge-link {
    text-align: center;
   /* margin-top: 10px; */
   padding-bottom:14px!important;
}

.challenge-link a {
    background-color: grey;
    color: #041E42;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
}

.challenge-link a:hover {
    background-color: #041E42;
    color: white;
}

.challenge-participation-marker {
   width: 100px;
}
.challenge-event-logo {
   width: 100px;
}
.challenge-official-marker {
   width: 100px;
}

.challenge-participation-marker2 {
    width: 100px;
}

 img{
    width: 100%; /* Füllt den Elterncontainer aus */
    height: auto; /* Hält das Seitenverhältnis */
    display: block; /* Entfernt Standard-Whitespace unter dem Bild */

 }

/*Challenge Room*/

.challenge-room-container {
    display: grid;
    grid-template-areas:
        'name participants'
        'team1 points'
        'marlon bets';
        background-color: rgba(4, 30, 66, 0.8); 


        /* Restliche Stile beibehalten */
        color: #f4e6d7;
        /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
          position: relative; /* Für die Positionierung des Inhalts */
          
          /* border-image anpassen */
          border: 50px solid transparent; /* Passen Sie diese Breite an die Breite Ihres Rahmens an */
          border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 30% round; /* Slice-Wert und fill für nahtlose Kanten */
          /* Hier ist '30' ein geschätzter Wert; Sie müssen vielleicht mit diesem Wert experimentieren */
          border-bottom: 80px solid transparent;
          border-top: 80px solid transparent;
          /* Die border-radius Eigenschaft entfernen */
          border-image-outset: 5 px;
          margin-bottom:20px;
      /*    animation: floatAnimation 5s ease-in-out infinite alternate;*/

}
/*
@keyframes floatAnimation {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(10px);
    }
  }*/
.challenge-name-description { grid-area: name; }
.challenge-participants { grid-area: participants; }
.team1 { grid-area: team1; }
.team2 { grid-area: team2; }
.points { grid-area: points; }
.marlon-obligation { grid-area: marlon; }
.challenge-bets { grid-area:
    bets; }

/* Anpassungen für jedes Element innerhalb des Containers */
.challenge-room-container > div {
    background-color: transparent; /* Dunkles Blau, angelehnt an den Rahmen */
    color: #f4e6d7; /* Cremige Textfarbe, die zum Rahmen passt */
    padding: 0.5em; /* Innenabstand für Text und Kinder */
    border: 1px solid #f4e6d7;
}
    
    /* Stil für Überschriften innerhalb der Container */
    .challenge-room-container h2 {
    color: #f4e6d7; /* Helles Beige für den Text */
    margin-bottom: 0.5em;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
    .challenge-room-container {
    grid-template-areas:
    'name'
    'participants'
    'team1'
    'team2'
    'points'
    'marlon'
    'bets';
    }
}
    .challenge-room-container > div {
        margin-bottom: 10px;
    }
    @media (max-width: 480px) {
        .challenge-room-container {
        grid-template-areas:
        'name'
        'participants'
        'team1'
        'team2'
        'points'
        'marlon'
        'bets';
        }
        }

/* Stil für Auswahlschaltflächen */
.team-select-button, #opt-out-button {
    background-color: #6272a4; /* Passend zum Steampunk-Stil */
    color: #f8f8f2; /* Helles Beige, das gut lesbar ist */
    border: 1px solid #f4e6d7; /* Rahmenfarbe passend zum Thema */
    transition: background-color 0.3s, transform 0.3s;
}

.team-select-button:hover, #opt-out-button:hover {
    background-color: #ffd700; /* Goldton beim Hover */
    transform: translateY(-2px); /* Hebt den Button leicht an */
}

        
        .team-members {
            color: #f4e6d7;
        }
        


        .team-selection {
    display: flex;
  /*  justify-content: space-around;*/
    margin-bottom: 10px;
}

.team {
    flex-basis: 48%; /* Teilt den verfügbaren Raum fast zu gleichen Teilen zwischen den beiden Teams auf */

}


/* Responsive Anpassungen */
/* Responsive Anpassungen */
/*
@media (max-width: 768px) {
    .team-selection {
        flex-direction: column;
    }

    .team {
        flex-basis: auto;
    }

    #opt-out-button {
        width: 100%;
    }

    /* Anpassungen für die Versus-Radio-Gruppe für Zweier-Reihen */
/*    #versus {
        display: flex;
        flex-wrap: wrap; /* Ermöglicht das Umbruch der Elemente */
/*        justify-content: space-around; /* Gleichmäßiger Abstand zwischen den Elementen */
 /*       gap: 10px; /* Vertikaler und horizontaler Abstand zwischen den Elementen */
 /*   }

    #versus input[type="radio"] + label {
        display: inline-block; /* Label neben dem Radio-Button */
    /*    text-align: center; /* Zentriert den Text des Labels */
 /*   }

    #versus input[type="radio"], #versus label {
        flex: 1 1 48%; /* Jedes Element nimmt fast die Hälfte der Containerbreite ein, mit etwas Platz für den Abstand dazwischen */
 /*       min-width: 120px; /* Minimale Breite für Radio-Buttons und Labels, um Überlappungen zu vermeiden */
 /*   }
/*} */


.participants-points-ranking ol {
   /* list-style-type: decimal;*/
    padding-left: 20px;
}

.participants-points-ranking li {
    margin-bottom: 5px;
}


.entry-content p {
    margin-bottom:0px!important;
}

p {
    margin: 0 0 0px!important;
}

.entry-content a {
    color: white!important;

}

.entry-content ol li{
    list-style-type:none!important;
}


#custom-button-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
 
   
}

.custom-button {
    display: block;
    width: 25%; /* Jeder Button nimmt 1/4 der Containerbreite ein */
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;
    padding: 5px; /* Polsterung für besseren Klickbereich */
    border: 2px solid #f4e6d7; /* Helle Grenze, die den Spiel-Button-Stil aufgreift */
    background-color:#f4e6d7;
    color: #f4e6d7; /* Helles Textfarbe */
    cursor: pointer; /* Cursor als Zeiger, um die Klickbarkeit zu signalisieren */
    transition: all 0.3s ease; /* Glatter Übergang für Hover- und Klick-Effekte */
    box-shadow: 0 2px 5px #f4e6d7; /* Schatten für Tiefe */
    user-select: none; /* Verhindert das Auswählen des Textes */
    outline: none; /* Entfernt Standard-Fokus-Glow */
    border-radius: 15px; /* Rundliche Ecken */
}
.custom-button {
    display: block;
    width: 40%; /* Jeder Button nimmt 1/4 der Containerbreite ein */
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right:10px;
    padding: 5px; /* Polsterung für besseren Klickbereich */
    border: 2px solid #f4e6d7; /* Helle Grenze, die den Spiel-Button-Stil aufgreift */
    background-color:#f4e6d7;
    color: #f4e6d7; /* Helles Textfarbe */
    cursor: pointer; /* Cursor als Zeiger, um die Klickbarkeit zu signalisieren */
    transition: all 0.3s ease; /* Glatter Übergang für Hover- und Klick-Effekte */
    box-shadow: 0 2px 5px #f4e6d7; /* Schatten für Tiefe */
    user-select: none; /* Verhindert das Auswählen des Textes */
    outline: none; /* Entfernt Standard-Fokus-Glow */
    border-radius: 15px; /* Rundliche Ecken */
}
.custom-button img {
    max-width: 100%; /* Bild an Buttonbreite anpassen */
    height: auto; /* Höhe automatisch anpassen */
}
.custom-button2 img {
    max-width: 100%; /* Bild an Buttonbreite anpassen */
    height: auto; /* Höhe automatisch anpassen */
}
.custom-button:hover {
    background-color: #f4e6d7; /* Hintergrundfarbe beim Überfahren */
    color: #041E42; /* Textfarbe beim Überfahren */
    border-color: #041E42; /* Grenzfarbe beim Überfahren */
}
.custom-button2:hover {
    background-color: #f4e6d7; /* Hintergrundfarbe beim Überfahren */
    color: #041E42; /* Textfarbe beim Überfahren */
    border-color: #041E42; /* Grenzfarbe beim Überfahren */
}
.custom-button:active {
    transform: translateY(2px); /* Verschiebt den Button beim Klicken nach unten */
    box-shadow: 0 1px 3px #000; /* Reduzierter Schatten für den Klick-Effekt */
}
.custom-button2:active {
    transform: translateY(2px); /* Verschiebt den Button beim Klicken nach unten */
    box-shadow: 0 1px 3px #000; /* Reduzierter Schatten für den Klick-Effekt */
}

.participants-points-ranking {
    background-color: #041E42; /* Dunkelblauer Hintergrund */
    border: 4px solid #f4e6d7; /* Rahmen im Steampunk-Stil */
    padding: 20px; /* Ausreichend Abstand um den Text */
    margin: 20px 0; /* Vertikaler Abstand von anderen Elementen */
    border-radius: 10px; /* Leicht abgerundete Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Subtiler Schatten für eine tiefe Wirkung */
    color: #f4e6d7; /* Cremefarbener Text, der gut zum Dunkelblau passt */
    overflow-x: auto; /* Erlaubt horizontales Scrollen, wenn nötig */

}

.participants-points-ranking h2 {
    text-align: center; /* Zentrieren der Überschrift */
    color: #ffd700; /* Goldene Farbe für die Überschrift */
    margin-bottom: 16px; /* Abstand zur Liste */
    text-shadow: 1px 1px 2px #000; /* Schatten für die Überschrift für mehr Tiefe */
}

.participants-points-ranking ol {
    counter-reset: ranking; /* Counter für die Listenelemente */
    list-style-type: none; /* Entfernen der Standard-Listenpunkte */
    padding-left: 0; /* Entfernen des Standard-Abstands */
}

.participants-points-ranking ol li {
    counter-increment: ranking; /* Zähler für jedes Listenelement erhöhen */
    font-size: 1.1em; /* Etwas größere Schriftgröße */
    padding: 8px 0; /* Vertikaler Abstand für die Listenelemente */
    border-bottom: 1px solid #f4e6d7; /* Abtrennung zwischen den Listenelementen */
}

.participants-points-ranking ol li::before {
    content: counter(ranking) ". "; /* Füge die Nummerierung vor dem Text ein */
    font-weight: bold; /* Fettgedruckte Nummerierung */
    color: #ffd700; /* Goldene Farbe für die Nummerierung */
}

/* Stil für das letzte Listenelement, um die untere Grenze zu entfernen */
.participants-points-ranking ol li:last-child {
    border-bottom: none;
}

.participants-points-ranking table {
    width: 100%; /* Sorgt dafür, dass die Tabelle den Container voll ausnutzt */
    border-collapse: collapse; /* Entfernt den Abstand zwischen den Zellen */
}

.participants-points-ranking th, .participants-points-ranking td {
    text-align: left; /* Textausrichtung */
    padding: 8px; /* Abstand innerhalb der Zellen */
    border-bottom: 1px solid #f4e6d7; /* Linie zwischen den Zeilen */
}

.participants-points-ranking th {
    background-color: black; /* Hintergrundfarbe für Kopfzeilen */
    color: #041E42; /* Textfarbe für Kopfzeilen */
}


.highlight {
    background-color: green; /* Hellgrün */
}



th[data-sort-order="asc"]::after {
    content: " \2191"; /* Pfeil nach oben */
}

th[data-sort-order="desc"]::after {
    content: " \2193"; /* Pfeil nach unten */
}


.participants-points-ranking-table {
    min-width: 600px; /* Adjust based on your table's needs */
    width: 100%;
}

@media (max-width: 600px) {
    .participants-points-ranking-table th, 
    .participants-points-ranking-table td {
        padding: 8px; /* Smaller padding on small screens */
    }
}
@media (max-width: 480px) {
    .participants-points-ranking-table {
      /*  display: none;  Verstecke die Tabelle auf sehr kleinen Bildschirmen */
    }
    
    .participant-card {
        background: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        margin-bottom: 10px;
    }
}


.searchbar {
    background-color: rgba(4, 30, 66, 0.8);
    color: #f4e6d7;
    border: 20px solid transparent;
    border-image: url('/wp-content/plugins/ChallengeMode/images/gamestyle/Neues-Projekt-1.webp') 100 round;
    margin-bottom: 20px;
    background-clip: padding-box;
    width: 100%; /* Breite der Box anpassen nach Bedarf */
    margin: 20px auto; /* Zentriert die Box */
	display: flex;
    flex-direction: column;
}

.searchbar input[type="text"] {
    width: 100%; /* Füllt die gesamte Breite der searchbar aus */
    padding: 10px;
    background-color: transparent;
    color: #f4e6d7; /* Textfarbe wie in der challenge-box2 */
    box-shadow: none;
	    border: none;
    border-bottom: 2px solid;
}

.searchbar input[type="text"]::placeholder {
    color: #f4e6d7; /* Farbe des Platzhalters */
}

.accordion-container {
    margin-bottom: 10px;
}

.accordion-toggle {
    background-color: #f1f1f1;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: background-color 0.2s ease;
}

.accordion-toggle:hover,
.accordion-toggle.active {
    background-color: #ccc;
}

.accordion-content {
    display: none;
    overflow: hidden;
    padding: 0 10px;
}

.flex-container {
    display: flex;
}



.radio-group img {
    width: 100%; /* Stellt sicher, dass die Bilder die gleiche Breite haben */
}

.description-container {
    flex: 1;
    margin-left: 20px;
}

.description {
    display: none;
    margin-top: 5px;
    font-size: 0.9em;
    color: #666;
}


            .badge-container img {
               /* width: 50px;
                height: 50px; */
            }
            .badge-container label {
                display: inline-block;
                text-align: center;
                margin: 5px;
            }
            .badge-container span {
                display: block;
                margin-top: 5px;
            }
			
			#event-logo{
				width:150px;
			}
			
.filter-button {
    background-color: transparent;
    border: 2px solid #f4e6d7;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px;
}

.filter-button img {
    width: 30px;
    height: 30px;
}

.filter-button.active {
    background-color: #ddd; /* Hintergrundfarbe für aktive Filter */
}

.filter-button:not(.active) {
    background-color: transparent; /* Hintergrundfarbe für nicht aktive Filter */
}

.table-wrapper {
    overflow-x: auto;
    position: relative;
}

.sticky-column {
    position: sticky;
    left: 0;
    background-color: #041E42; /* Background color to hide the content underneath */
    z-index: 2; /* Make sure it stays above other rows */
    box-shadow: 2px 0 5px -2px #888; /* Optional: Add a shadow to indicate it's fixed */
}

.tablebutton{
	border:none;
	padding:2px;
	width:100%;
	height:100%;
}