:root{
  --bg:#06090e; --panel:#0d121b; --panel2:#111824; --text:#f4f5f7;
  --muted:#a6adba; --red:#e3232b; --red2:#8d0e14; --green:#5de39b;
  --line:rgba(255,255,255,.11); --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;
background-image:linear-gradient(115deg,transparent 0 46%,rgba(227,35,43,.25) 46.1%,transparent 46.3%),
radial-gradient(circle at 15% 15%,rgba(227,35,43,.28),transparent 25%),
radial-gradient(circle at 85% 65%,rgba(227,35,43,.14),transparent 28%);
z-index:-1}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:50;background:rgba(6,9,14,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.5px}
.brand-mark{width:45px;height:45px;border:1px solid rgba(227,35,43,.55);border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#151b26,#080b10);box-shadow:0 0 28px rgba(227,35,43,.15)}
.brand-mark svg{width:29px;filter:drop-shadow(0 0 8px rgba(227,35,43,.45))}
.brand span{font-size:20px}.brand b{color:var(--red)}
.nav-links{display:flex;gap:7px;align-items:center}.nav-links a{padding:10px 13px;border-radius:10px;color:var(--muted);font-size:14px}.nav-links a:hover,.nav-links a.active{color:white;background:rgba(255,255,255,.06)}
.nav-user{border:1px solid rgba(227,35,43,.4)!important;color:white!important;background:rgba(227,35,43,.1)}
.hero{min-height:610px;display:flex;align-items:center;padding:80px 0 65px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,14,.92),rgba(6,9,14,.38),rgba(6,9,14,.8));z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:center}
.kicker{color:var(--red);font-weight:800;letter-spacing:3px;font-size:12px}
h1{font-size:clamp(42px,7vw,82px);line-height:.95;margin:16px 0 20px;text-transform:uppercase;letter-spacing:-2px}
h1 b{color:var(--red)}
.lead{font-size:18px;line-height:1.65;color:var(--muted);max-width:700px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{padding:14px 20px;border-radius:11px;font-weight:800;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#131923}
.btn.primary{background:linear-gradient(135deg,var(--red),#a90f16);border-color:transparent}.btn:hover{transform:translateY(-2px)}
.hero-logo{min-height:360px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(20,27,39,.9),rgba(8,11,16,.75));box-shadow:var(--shadow);display:grid;place-items:center;position:relative;overflow:hidden}
.hero-logo:before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(227,35,43,.25);transform:rotate(35deg);border-radius:50%}
.hero-logo svg{width:180px;z-index:1;filter:drop-shadow(0 0 25px rgba(227,35,43,.35))}
.hero-logo .logo-text{z-index:1;text-align:center;font-size:25px;font-weight:900;letter-spacing:2px}.logo-text b{color:var(--red)}
section{padding:70px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-head h2{margin:0;font-size:34px}.section-head p{margin:7px 0 0;color:var(--muted)}
.server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.server-card,.news-card,.portal-card,.content-card{background:linear-gradient(145deg,rgba(18,24,35,.97),rgba(10,14,21,.97));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.server-card{padding:22px;min-height:235px;transition:.2s}.server-card:hover,.portal-card:hover{transform:translateY(-5px);border-color:rgba(227,35,43,.5)}
.server-top{display:flex;justify-content:space-between;gap:12px}.server-title{font-weight:900;font-size:21px;text-transform:uppercase;line-height:1.05}.server-icon{font-size:28px}
.status{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--green);margin:14px 0}.status:before{content:"● ";font-size:10px}
.stat{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:10px 0;color:var(--muted);font-size:14px}.stat b{color:white;font-size:13px}
.news-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}.news-card{padding:28px}.news-date{font-size:12px;color:var(--red);font-weight:bold;letter-spacing:1.5px}.news-card h3{font-size:27px;margin:10px 0}.news-card p{color:var(--muted);line-height:1.6}
.portals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.portal-card{padding:25px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}.portal-icon{font-size:38px}.portal-card h3{margin:15px 0 6px}.portal-card p{margin:0;color:var(--muted);font-size:14px}
.page-hero{padding:90px 0 45px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:58px;margin:10px 0}.page-hero p{color:var(--muted);font-size:18px}
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.download-card{padding:25px}.download-card h3{margin:10px 0}.download-card p{color:var(--muted);min-height:48px}
.about-grid,.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.content-card{padding:30px}.content-card h2{margin-top:0}.content-card p,.content-card li{color:var(--muted);line-height:1.7}
.form{display:grid;gap:13px}.form input{width:100%;padding:14px;border-radius:10px;border:1px solid var(--line);background:#080c12;color:white}.small{font-size:13px;color:var(--muted)}
.footer{border-top:1px solid var(--line);padding:35px 0;color:var(--muted);font-size:14px;margin-top:50px}

/* Teamvorstellung */
.team-section{padding-top:20px}
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.team-card{display:flex;min-height:330px;padding:28px;flex-direction:column;background:linear-gradient(145deg,rgba(18,24,35,.97),rgba(10,14,21,.97));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.team-card-linked{transition:transform .2s,border-color .2s,box-shadow .2s}
.team-card-linked:hover{transform:translateY(-5px);border-color:rgba(227,35,43,.6);box-shadow:0 22px 55px rgba(0,0,0,.55)}
.team-card-linked:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.team-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.team-avatar{width:68px;height:68px;display:grid;place-items:center;flex:0 0 68px;border:1px solid rgba(227,35,43,.48);border-radius:50%;background:#151b26;color:#fff;font-size:22px;font-weight:900}
.team-profile-state{color:var(--red);font-size:12px;font-weight:900;letter-spacing:.7px;text-align:right}
.team-profile-state.is-pending{color:var(--muted)}
.team-card h3{margin:24px 0 8px;font-size:25px}
.team-card p{margin:0 0 22px;color:var(--muted);line-height:1.65}
.team-roles{display:grid;gap:9px;margin:auto 0 0;padding:0;list-style:none}
.team-roles li{position:relative;padding-left:18px;color:#e4e8ef;font-size:14px;line-height:1.4}
.team-roles li:before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--red)}
@media(max-width:900px){.hero-grid,.news-grid,.about-grid,.user-grid{grid-template-columns:1fr}.server-grid,.download-grid{grid-template-columns:repeat(2,1fr)}.portals{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.hero{padding-top:55px}}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}
@media(max-width:560px){.container{width:min(100% - 24px,1180px)}.server-grid,.download-grid,.portals{grid-template-columns:1fr}.hero{min-height:auto}.hero-logo{min-height:280px}.page-hero h1{font-size:42px}.team-card{min-height:0;padding:24px}}



/* =========================================================
   STARTSEITE – ERWEITERUNGEN
   ========================================================= */

.overview-section{
    padding-top: 30px;
}

.center-head{
    justify-content:center;
    text-align:center;
}

.overview-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.overview-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px;
    background:rgba(17,23,34,.75);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
}

.overview-icon{
    font-size:30px;
}

.overview-card strong{
    display:block;
    font-size:28px;
    line-height:1;
    color:#fff;
}

.overview-card span{
    display:block;
    margin-top:5px;
    color:#aeb6c5;
    font-size:14px;
}

.game-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.game-card{
    position:relative;
    padding:26px;
    min-height:245px;
    background:rgba(17,23,34,.82);
    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;
    transition:.25s ease;
}

.game-card:hover{
    transform:translateY(-5px);
    border-color:rgba(227,35,43,.55);
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}

.game-icon{
    font-size:38px;
    margin-bottom:18px;
}

.game-card h3{
    margin:0 0 10px;
    font-size:21px;
}

.game-card p{
    color:#aeb6c5;
    line-height:1.6;
    margin:0 0 22px;
}

.game-status{
    display:inline-block;
    font-size:12px;
    font-weight:800;
    letter-spacing:.8px;
}

.game-status.online{
    color:#58e69a;
}

.featured-game{
    border-color:rgba(227,35,43,.35);
}

.new-badge{
    position:absolute;
    top:18px;
    right:18px;
    padding:6px 10px;
    border-radius:999px;
    background:#e3232b;
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}

.news-section{
    background:rgba(255,255,255,.018);
}

.featured-news{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:34px;
    align-items:center;
    padding:38px;
    border-radius:22px;
    border:1px solid rgba(227,35,43,.32);
    background:linear-gradient(135deg,rgba(227,35,43,.16),rgba(17,23,34,.88));
}

.featured-news-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:160px;
    height:160px;
    font-size:72px;
    border-radius:50%;
    background:rgba(0,0,0,.22);
}

.news-date{
    margin-bottom:10px;
    color:#e3232b;
    font-size:12px;
    font-weight:900;
    letter-spacing:1.2px;
}

.featured-news h3,
.news-card h3{
    margin:0 0 12px;
    font-size:25px;
}

.featured-news p,
.news-card p{
    color:#aeb6c5;
    line-height:1.7;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:20px;
}

.news-card{
    padding:28px;
    border-radius:18px;
    background:rgba(17,23,34,.75);
    border:1px solid rgba(255,255,255,.08);
}

.about-grid{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:60px;
    align-items:center;
}

.about-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:280px;
    font-size:120px;
    border-radius:28px;
    background:radial-gradient(circle,rgba(227,35,43,.2),rgba(17,23,34,.55) 65%);
    border:1px solid rgba(227,35,43,.18);
}

.about-features{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:24px 0;
}

.about-features div{
    padding:10px 14px;
    border-radius:10px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.07);
    color:#d7dce6;
}

.user-teaser{
    margin:20px 0 70px;
}

.user-teaser-content{
    padding:42px;
    border-radius:24px;
    background:linear-gradient(135deg,#171d29,#0c1018);
    border:1px solid rgba(227,35,43,.28);
}

.user-teaser h2{
    margin:8px 0 12px;
}

.user-teaser p{
    color:#aeb6c5;
    max-width:700px;
    line-height:1.6;
}

.user-features{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:25px 0;
}

.user-features div{
    padding:12px 16px;
    border-radius:10px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    color:#e4e8ef;
}

@media(max-width:950px){
    .overview-grid{grid-template-columns:repeat(2,1fr);}
    .game-grid{grid-template-columns:repeat(2,1fr);}
    .about-grid{grid-template-columns:1fr;gap:28px;}
}

@media(max-width:700px){
    .overview-grid,
    .game-grid,
    .news-grid{grid-template-columns:1fr;}

    .featured-news{
        grid-template-columns:1fr;
        padding:26px;
        gap:20px;
    }

    .featured-news-icon{
        width:100px;
        height:100px;
        font-size:48px;
    }

    .about-logo{
        min-height:190px;
        font-size:80px;
    }

    .user-teaser-content{
        padding:28px 22px;
    }
}


/* Zusätzlicher Status für geplante/offline Server */
.game-status.offline{
    color:#ff6b6b;
}

/* 7 Gameserver passen weiterhin sauber ins Grid */
@media(min-width:951px){
    .game-grid{
        grid-template-columns:repeat(3,1fr);
    }
}


/* Drei Übersichtskarten sauber verteilen */
.overview-grid{
    grid-template-columns:repeat(3,1fr);
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
}

@media(max-width:700px){
    .overview-grid{
        grid-template-columns:1fr;
    }
}


/* Finale Anpassungen */
.clickable-card{cursor:pointer;}
.clickable-card:hover{transform:translateY(-6px);}
.discord-btn{border-color:rgba(88,101,242,.65);}
.discord-btn:hover{border-color:#5865f2;}

/* Die drei Karten bei "Opfar Trupp auf einen Blick" exakt zentriert */
.overview-grid{
    width:min(100%, 960px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:0 auto;
    justify-content:center;
}

@media(max-width:700px){
    .overview-grid{grid-template-columns:1fr;width:100%;}
}

.status.offline{color:#ff6b6b;}

.server-card .status.offline{color:#ff6b6b;}