/* ===================================================
   Teameinteilung – Frontend Option B (Avatar-Karten)
   =================================================== */

.te-frontend-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 20px 0;
    font-family: inherit;
}

/* ── Team-Karte ──────────────────────────────────── */
.te-fe-team {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────── */
.te-fe-team-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--team-color, #1a6e3a);
    position: relative;
}

/* Großes Team-Badge links */
.te-fe-team-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.35);
    text-transform: uppercase;
}

.te-fe-team-info { flex: 1; }

.te-fe-team-info h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.te-fe-liga {
    font-size: .8rem !important;
    color: rgba(255,255,255,.75) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.te-fe-meta {
    font-size: .78rem !important;
    color: rgba(255,255,255,.65) !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
}

/* ── Spieler-Grid ────────────────────────────────── */
.te-fe-player-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 22px;
    background: color-mix(in srgb, var(--team-color, #1a6e3a) 4%, #fff);
}

/* ── Einzelne Spieler-Karte ──────────────────────── */
.te-fe-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 88px;
    text-align: center;
    position: relative;
}

/* Avatar-Kreis */
.te-fe-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--team-color, #1a6e3a) 18%, #fff);
    border: 3px solid color-mix(in srgb, var(--team-color, #1a6e3a) 35%, #fff);
    color: var(--team-color, #1a6e3a);
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    letter-spacing: .5px;
}

.te-fe-player:hover .te-fe-avatar {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Spielführer – goldener Ring */
.te-fe-player--sf .te-fe-avatar {
    border: 3px solid #f5a623;
    box-shadow: 0 0 0 3px rgba(245,166,35,.3);
    background: color-mix(in srgb, var(--team-color, #1a6e3a) 15%, #fff);
}

/* Gold-Stern oben rechts */
.te-fe-sf-star {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: .85rem;
    color: #f5a623;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Spieler-Name unter Avatar */
.te-fe-player-name {
    font-size: .75rem;
    color: #444;
    line-height: 1.3;
    word-break: break-word;
}

.te-fe-player-name strong {
    color: #111;
    font-size: .8rem;
}

/* Spielführer-Badge */
.te-fe-sf-label {
    font-size: .65rem;
    color: #f5a623;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: rgba(245,166,35,.12);
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid rgba(245,166,35,.3);
    line-height: 1.6;
}

/* Leer-Hinweis */
.te-fe-empty {
    font-size: .83rem;
    color: #bbb;
    font-style: italic;
    padding: 6px 0;
    width: 100%;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 600px) {
    .te-fe-team-header { flex-direction: column; text-align: center; }
    .te-fe-player-grid { justify-content: center; }
}