/* ===================================== */
/* TEAMSEITE (UNVERÄNDERT)
/* ===================================== */

.team-page {
    min-height: 100vh;
    padding: 140px clamp(18px, 6vw, 96px) 80px;
    background:
        linear-gradient(
            rgba(18,22,28,.96),
            rgba(18,22,28,.96)
        ),
        url("assets/background.png") center/cover fixed;
}

.team-header {
    text-align: center;
    margin-bottom: 80px;
}

.team-header h1 {
    max-width: none;
    font-size: clamp(2rem, 3vw, 3.2rem);
}

.team-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

/* ===================================== */
/* EBENEN
/* ===================================== */

.team-level {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    position: relative;
}

/* ===================================== */
/* TEAM CARD BASIS (NEUTRAL BLEIBT)
/* ===================================== */

.team-card {
    width: 270px;
    padding: 24px;

    border-radius: var(--radius);
    border: 1px solid var(--line);

    /* WICHTIG: bleibt immer gleich */
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);

    text-align: center;

    transition: all .3s ease;
}

.team-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* ===================================== */
/* ROLLEN = NUR BORDER + GLOW (KEIN BACKGROUND!)
/* ===================================== */

/* ADMIN */
.team-card.role-admin {
    border: 1px solid var(--admin);
    box-shadow: 0 0 18px rgba(255,213,111,.18);
}

.team-card.role-admin:hover {
    box-shadow: 0 0 35px rgba(255,213,111,.35);
}

/* DEV */
.team-card.role-dev {
    border: 1px solid var(--dev);
    box-shadow: 0 0 18px rgba(255,157,84,.18);
}

.team-card.role-dev:hover {
    box-shadow: 0 0 35px rgba(255,157,84,.3);
}

/* SUPPORT */
.team-card.role-support {
    border: 1px solid var(--support);
    box-shadow: 0 0 18px rgba(88,165,255,.15);
}

.team-card.role-support:hover {
    box-shadow: 0 0 35px rgba(88,165,255,.25);
}

/* DESIGN */
.team-card.role-design {
    border: 1px solid var(--design);
    box-shadow: 0 0 18px rgba(180,120,255,.15);
}

.team-card.role-design:hover {
    box-shadow: 0 0 35px rgba(180,120,255,.25);
}

/* SUPPORTER */
.team-card.role-supporter {
    border: 1px solid var(--supporter, #46c88c);
    box-shadow: 0 0 15px rgba(70,200,140,.12);
}

.team-card.role-supporter:hover {
    box-shadow: 0 0 28px rgba(70,200,140,.22);
}

/* TRAINEE */
.team-card.role-trainee {
    border: 1px solid var(--trainee);
    box-shadow: 0 0 12px rgba(180,180,180,.12);
}

/* ===================================== */
/* ROOT COLORS
/* ===================================== */

:root {
    --admin: #ffd56f;
    --dev: #ff9d54;
    --support: #58a5ff;
    --design: #b478ff;
    --supporter: #46c88c;
    --trainee: #bdbdbd;
}

/* ===================================== */
/* TEAM PAGE
/* ===================================== */

.team-page {
    min-height: 100vh;
    padding: 140px clamp(18px, 6vw, 96px) 80px;
    background:
        linear-gradient(rgba(18,22,28,.96), rgba(18,22,28,.96)),
        url("assets/background.png") center/cover fixed;
}

.team-header {
    text-align: center;
    margin-bottom: 80px;
}

.team-header h1 {
    font-size: clamp(2rem, 3vw, 3.2rem);
}

.team-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}

/* ===================================== */
/* LEVELS
/* ===================================== */

.team-level {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

/* ===================================== */
/* CARD BASE (ALLE GLEICH!)
/* ===================================== */

.team-card {
    width: 270px;
    padding: 24px;

    border-radius: 16px;
    border: 1px solid var(--line, rgba(255,255,255,.12));

    background: rgba(255,255,255,.04);
    backdrop-filter: blur(12px);

    text-align: center;

    transition: all .3s ease;
}

.team-card:hover {
    transform: translateY(-6px) scale(1.02);
}

/* ===================================== */
/* ROLE SYSTEM (NUR FARBE)
/* ===================================== */

.team-card.role-admin { --c: var(--admin); }
.team-card.role-dev { --c: var(--dev); }
.team-card.role-support { --c: var(--support); }
.team-card.role-design { --c: var(--design); }
.team-card.role-supporter { --c: var(--supporter); }
.team-card.role-trainee { --c: var(--trainee); }

/* ===================================== */
/* ROLE BORDER + GLOW (EINHEITLICH)
/* ===================================== */

.team-card {
    border: 1px solid var(--c, rgba(255,255,255,.15));
    box-shadow: 0 0 18px color-mix(in srgb, var(--c) 25%, transparent);
}

.team-card:hover {
    box-shadow: 0 0 45px color-mix(in srgb, var(--c) 45%, transparent);
}

/* ===================================== */
/* AVATAR
/* ===================================== */

.team-avatar {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 50%;
    font-size: 2rem;

    color: white;

    background: radial-gradient(circle at top,
        rgba(255,255,255,.15),
        rgba(255,255,255,.04)
    );

    border: 2px solid var(--c, rgba(255,255,255,.2));

    box-shadow: 0 0 20px color-mix(in srgb, var(--c) 35%, transparent);

    transition: .3s ease;
}

.team-card:hover .team-avatar {
    transform: scale(1.08);
    filter: brightness(1.1);
}

/* ===================================== */
/* NAME
/* ===================================== */

.team-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 12px;
}

/* ===================================== */
/* BADGES
/* ===================================== */

.role-badge {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;

    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    background: color-mix(in srgb, var(--c) 15%, transparent);
    color: var(--c);
}

/* fallback owner */
.role-owner {
    --c: var(--admin);
}

/* ===================================== */
/* DISCORD
/* ===================================== */

.team-discord {
    margin-top: 14px;
}

.team-discord a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--muted, #aaa);
    transition: .3s ease;
}

.team-discord a:hover {
    color: var(--c);
}

/* ===================================== */
/* MOBILE
/* ===================================== */

@media (max-width: 768px) {
    .team-level {
        flex-direction: column;
        align-items: center;
    }

    .team-card {
        width: min(100%, 320px);
    }
}