/* =========================
   TRIBES PAGE V1.0
========================= */

:root{
    --tribe-primary:#ff7b00;
    --tribe-secondary:#00bfff;
    --tribe-dark:#0d1117;
    --tribe-card:#141c25;
    --tribe-border:rgba(255,255,255,.08);
    --tribe-text:#e6edf3;
    --tribe-muted:#9ca3af;
}

/* =========================
   GLOBAL
========================= */

body{
    margin:0;
    background:
    linear-gradient(
        rgba(5,8,15,.88),
        rgba(8,12,20,.95)
    ),
    url('/assets/images/tribes/hero-bg.webp')
    center/cover no-repeat fixed;

    color:var(--tribe-text);
    font-family:
    Arial,
    Helvetica,
    sans-serif;
}

/* =========================
   HERO
========================= */

.tribesHero{
    position:relative;
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 20px 80px;
}

.tribesOverlay{
    position:absolute;
    inset:0;
    background:
    radial-gradient(
        circle at top,
        rgba(0,191,255,.15),
        transparent 40%
    ),
    radial-gradient(
        circle at bottom,
        rgba(255,123,0,.12),
        transparent 40%
    );
}

.tribesHeroContent{
    position:relative;
    z-index:2;
    max-width:850px;
}

.tribesBadge{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:
    rgba(255,255,255,.08);

    border:1px solid
    rgba(255,255,255,.08);

    backdrop-filter:blur(12px);
    margin-bottom:25px;
}

.tribesHero h1{
    font-size:
    clamp(2.8rem,5vw,4.5rem);

    line-height:1.05;
    margin-bottom:25px;
    font-weight:900;
    letter-spacing:-2px;
}

    line-height:1.1;
    margin-bottom:25px;
}

.tribesHero p{
    font-size:1.15rem;
    color:var(--tribe-muted);
    max-width:700px;
    margin:auto;
}

/* =========================
   BUTTONS
========================= */

.tribesHeroButtons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:35px;
    flex-wrap:wrap;
}

.tribeBtn{
    border:none;
    border-radius:14px;
    padding:16px 28px;
    cursor:pointer;
    font-size:1rem;
    font-weight:bold;
    transition:.3s;
}

.tribeBtn.primary{
    background:
    linear-gradient(
        135deg,
        var(--tribe-primary),
        #ffae42
    );

    color:#fff;
}

.tribeBtn.secondary{
    background:
    rgba(255,255,255,.08);

    color:#fff;
    border:1px solid
    rgba(255,255,255,.1);
}

.tribeBtn:hover{
    transform:
    translateY(-3px);
}

/* =========================
   FILTER
========================= */

.tribesFilters{
    margin-top:-60px;
    position:relative;
    z-index:5;
    padding:0 20px;
}

.filterWrapper{
    max-width:1200px;
    margin:auto;

    display:flex;
    gap:15px;
    flex-wrap:wrap;

    background:
    rgba(20,28,37,.9);

    backdrop-filter:blur(15px);

    border:1px solid
    var(--tribe-border);

    border-radius:22px;
    padding:25px;
}

.filterWrapper select,
.filterWrapper input{
    flex:1;
    min-width:180px;

    background:#0f1720;
    border:1px solid
    rgba(255,255,255,.08);

    border-radius:12px;
    color:#fff;
    padding:14px;
}

/* =========================
   CARDS
========================= */

.tribesSection{
    padding:120px 20px 80px;
}

.tribesGrid{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:
    repeat(auto-fit,
    minmax(320px,1fr));

    gap:25px;
}

.tribeCard{
    background:
    linear-gradient(
        180deg,
        rgba(10,18,28,.98),
        rgba(7,12,18,.98)
    );

    border:1px solid
    rgba(255,255,255,.08);

    border-radius:24px;

    padding:14px;

    display:flex;
    flex-direction:column;

    min-height:620px;

    transition:.3s;
    overflow:hidden;
    position:relative;
}
.tribeCard:hover{
    transform:
    translateY(-10px)
    scale(1.02);

    border-color:
    rgba(0,191,255,.4);

    box-shadow:
    0 0 45px
    rgba(0,191,255,.18);
}
.tribeType{
    display:inline-flex;
    padding:8px 14px;
    border-radius:50px;
    font-size:.9rem;
    font-weight:bold;
}

.pve{
    background:
    rgba(0,200,120,.15);

    color:#00d084;
}

.pvp{
    background:
    rgba(255,80,80,.15);

    color:#ff5b5b;
}

.tribeCard h3{
    font-size:1.8rem;
    margin:20px 0;
	text-shadow:
	0 0 12px
	rgba(255,123,0,.18);
}

.tribeCard p{
    color:var(--tribe-muted);
    line-height:1.7;
}

.tribeInfo{
    margin-top:14px;
    color:#d7dde4;
}

.tribeActions{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.tribeActions button{
    flex:1;
    border:none;
    border-radius:12px;
    padding:14px;
    cursor:pointer;
    font-weight:bold;
}

.joinBtn{
    background:
    linear-gradient(
        135deg,
        var(--tribe-secondary),
        #56ccff
    );

    color:#fff;
}

/* =========================
   CTA
========================= */

.tribesCTA{
    text-align:center;
    padding:100px 20px;
}

.tribesCTA h2{
    font-size:3rem;
}

.tribesCTA p{
    color:var(--tribe-muted);
    margin:20px 0 40px;
}

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

@media(max-width:768px){

    .tribesHero{
        min-height:65vh;
    }

    .tribesHero h1{
        font-size:2.7rem;
    }

    .tribesCTA h2{
        font-size:2rem;
    }

}
.pageVersion{
    position:fixed;
    bottom:20px;
    right:20px;

    padding:8px 14px;

    background:
    rgba(15,23,32,.75);

    border:1px solid
    rgba(255,255,255,.08);

    border-radius:14px;

    backdrop-filter:blur(10px);

    color:#8b96a5;
    font-size:.85rem;

    z-index:999;
}
/* =========================
   TRIBE CARD V1.1
========================= */

.tribeBanner{
    height:180px;
    overflow:hidden;
    border-radius:18px;
    margin-bottom:22px;
}

.tribeBanner img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.tribeCard:hover
.tribeBanner img{
    transform:scale(1.08);
}

.tribeContent{
    display:flex;
    flex-direction:column;
    flex:1;
}

.tribeTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tribeStatus{
    font-size:.85rem;
    font-weight:700;
}

.tribeStatus.online{
    color:#00d084;
}

.tribeMeta{
    margin-top:20px;
}

.tribeTags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.tribeTags span{
    background:
    rgba(255,255,255,.06);

    border:1px solid
    rgba(255,255,255,.06);

    padding:8px 14px;
    border-radius:50px;
    font-size:.85rem;
}

.tribeActions{
    margin-top:auto;
}
/* Buttons immer unten */

.tribeActions{
    display:flex;
    gap:12px;
    margin-top:auto;
    padding-top:25px;
}

.tribeActions button{
    flex:1;
    border:none;
    border-radius:14px;
    padding:14px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.tribeActions button:hover{
    transform:
    translateY(-2px);
}
/* =========================
   CREATE TRIBE
========================= */

.createTribeSection{
    padding:120px 20px;
}

.createTribeBox{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:
    1fr 480px;

    gap:60px;
    align-items:center;
}

.createBadge{
    display:inline-flex;

    padding:10px 18px;

    background:
    rgba(255,123,0,.12);

    border-radius:50px;

    color:#ff9d3f;
    font-weight:700;
}

.createLeft h2{
    font-size:3rem;
    margin:25px 0;
}

.createLeft p{
    color:#9ca3af;
    font-size:1.1rem;
    line-height:1.8;
}

.createFeatures{
    display:grid;
    gap:18px;
    margin-top:40px;
}

.tribeCreateCard{
    background:
    rgba(14,22,33,.95);

    border:1px solid
    rgba(255,255,255,.08);

    border-radius:28px;

    padding:35px;

    backdrop-filter:
    blur(14px);
}

.tribeCreateCard h3{
    font-size:2rem;
    margin-bottom:25px;
}

.tribeCreateCard input,
.tribeCreateCard select,
.tribeCreateCard textarea{
    width:100%;
    box-sizing:border-box;

    background:#09111c;

    border:1px solid
    rgba(255,255,255,.08);

    border-radius:16px;

    color:#fff;

    padding:16px;
    margin-bottom:18px;
}

.tribeCreateCard textarea{
    min-height:140px;
    resize:none;
}

@media(max-width:980px){

    .createTribeBox{
        grid-template-columns:1fr;
    }

}
/* =========================
   SERVER NOTICE
========================= */

.serverNotice{
    max-width:820px;
    margin:35px auto 0;

    padding:18px 24px;

    background:
    linear-gradient(
        135deg,
        rgba(0,208,132,.12),
        rgba(0,191,255,.10)
    );

    border:1px solid
    rgba(0,208,132,.25);

    border-radius:20px;

    color:#dbe7f3;

    line-height:1.7;

    backdrop-filter:
    blur(12px);
}

.serverNotice strong{
    color:#00d084;
}