i {
    font-size: 21px;
}
i::before,
i::after {
    content: " ~ ";
}
.team-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    max-width: 900px;
    margin: auto;
}
@media (min-width: 500px) {
    .team-block {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 800px) {
    .team-block {
        grid-template-columns: repeat(3, 1fr);
    }
}
.team-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.team-user p {
    margin: 0;
    font-weight: bold;
}

 /* --- ZUSÄTZLICHE STYLES FÜR WbC-CHAR-CARD-INTEGRATION --- */

/* Container für die Icons am Ende der Challenge-Beschreibung */
.char-icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

/* Wrapper für Icon und Tooltip (Wichtig für Positionierung) */
.char-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-left: 10px; 
}

/* Das eigentliche Charakter-Icon */
.teammember-icon {
    position: static !important;
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    cursor: pointer; /* Ändere von 'help' zu 'pointer' für Klick-Interaktion */
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(255,255,255, 0.2));
    transition: transform 0.2s, filter 0.2s;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    background: none !important;
    padding: 0 !important;
}

.char-challenge-icon {
    position: static !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    cursor: help;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(0,0,0, 0.9));
    transition: transform 0.2s, filter 0.2s;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    background: none !important;
    padding: 0 !important;
}

.teammember-icon:hover,
.teammember-icon.active { /* Füge .active hinzu, damit die Hover-Effekte auch beim Klick aktiv bleiben */
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255,255,255, 0.6));
}

/* Tooltip-Container (Charakter-Karte) */
.char-card-tooltip {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    width: 260px; 
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(10px); 
    pointer-events: none; /* Blockiert Klicks im Standardzustand */
    text-align: left;
}

/* 1. Hover-Zustand (Wie bisher) */
.char-icon-wrapper:hover .char-card-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px); 
}

/* 2. Active/Klick-Zustand (Neuer Zustand, der offen bleibt) */
.char-icon-wrapper.active .char-card-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px); 
    pointer-events: all; /* Erlaubt Klicks innerhalb der Karte, wenn sie aktiv ist */
}

/* Basis-Kartenstil (unverändert) */
.character-card-hover {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    border-top: 5px solid #ffe600ff;
}
.card-content-hover {
    padding: 10px;
}

.card-header-hover {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 5px;
    max-height: 60px; 
}

.header-left-hover h3 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.rarity-hover {
    font-size: 1.1em;
    letter-spacing: 0px;
    color: #444;
}

.member-icon-full { 
    width: 80px; 
    height: 80px; 
    border-radius: 100%;
    object-fit: cover;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

.card-details-hover p {
    margin: 5px 0;
    line-height: 1.3;
    font-size: 0.9em;
    color: #555;
}
.card-details-hover p::selection,
.card-details-hover p::-moz-selection,
.card-details-hover strong::selection,
.card-details-hover strong::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}


.card-details-hover strong {
    color: #5b67c7;
    vertical-align: center;
    font-weight: bolder;
}

/* Element Icons (unverändert) */
.ele-icon {
    display: inline-block;
    width: 20px; 
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 5px;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}
.ele-Anemo { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/anemo.svg'); }
.ele-Cryo, .ele-kryo { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/cryo.svg'); }
.ele-Dendro { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/dendro.svg'); }
.ele-Electro, .ele-elektro { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/electro.svg'); }
.ele-Geo { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/geo.svg'); }
.ele-Hydro { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/hydro.svg'); }
.ele-Pyro { background-image: url('https://luca.rosenloecher.org/wbc/loader/element/pyro.svg'); }

/* Essen Icons (unverändert) */
.essen-Icon {
    display: inline-block;
    width: 30px; 
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: 5px;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}
.essen-Kratztoffelpuffer { background-image: url('https://luca.rosenloecher.org/wbc/img/Kratztoffelpuffer.webp'); }
.essen-Weltfrieden  { background-image: url('https://luca.rosenloecher.org/wbc/img/Weltfrieden.webp'); }
.essen-Süß-mariniertes-Hühnchen  { background-image: url('https://luca.rosenloecher.org/wbc/img/Süß_mariniertes_Hühnchen.webp'); }