/* ==========================================================================
   BANGERCITY RP – gemeinsame Hülle: Farben, Grundgerüst, Knöpfe, Kopfzeile
   Gehört zu includes/nav.php. Wird von Seiten geladen, die nicht home.css
   verwenden (Wiki). Die Startseite bringt dieselben Regeln in home.css mit.
   ========================================================================== */

:root {
    --bg:        #07060f;
    --bg-2:      #0b0a17;
    --panel:     #110f20;
    --panel-2:   #15132a;
    --line:      rgba(255, 255, 255, .07);
    --line-2:    rgba(255, 255, 255, .12);

    --text:      #ebe9f7;
    --muted:     #9a93b8;
    --dim:       #6f6890;

    --purple:    #8b5cf6;
    --purple-2:  #6d4dff;
    --cyan:      #22d3ee;
    --pink:      #f05bd0;
    --green:     #2ee59d;
    --red:       #ff3d6e;
    --yellow:    #f5c451;

    --grad:      linear-gradient(135deg, #6d4dff 0%, #8b5cf6 50%, #c05bf0 100%);
    --grad-text: linear-gradient(100deg, #35d6f5 0%, #8b5cf6 55%, #f05bd0 100%);

    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --wrap: 1180px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 10% -5%, rgba(109, 77, 255, .16), transparent 70%),
        radial-gradient(780px 460px at 95% 10%, rgba(240, 91, 208, .1), transparent 70%);
}

h1, h2, h3, h4 { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- Knöpfe */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font: 600 13.5px/1 'Inter', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .08); }
.btn.primary { background: var(--grad); border-color: transparent; box-shadow: 0 10px 30px rgba(109, 77, 255, .38); }
.btn.discord { background: rgba(88, 101, 242, .16); border-color: rgba(88, 101, 242, .42); }
.btn.lg { padding: 16px 28px; font-size: 14px; }
.btn.sm { padding: 9px 16px; font-size: 12px; }

.led { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.led.on  { background: var(--green); box-shadow: 0 0 0 4px rgba(46, 229, 157, .16); animation: pulse 2.4s infinite; }
.led.off { background: var(--red);   box-shadow: 0 0 0 4px rgba(255, 61, 110, .16); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ================================================================ Kopfzeile */
.nav {
    position: sticky;
    top: 0;
    z-index: 70;
    background: rgba(7, 6, 15, .78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}
.nav.scrolled { background: rgba(7, 6, 15, .94); }

.bar { display: flex; align-items: center; gap: 22px; height: 72px; }

.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.logo b { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: .04em; display: block; line-height: 1.1; }
.logo small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    transition: .18s;
}
.links a i { font-size: 12.5px; opacity: .8; }
.links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.links a.on { color: #fff; background: var(--grad); box-shadow: 0 8px 22px -10px rgba(109, 77, 255, .9); }
.links a.on i { opacity: 1; }

.nav-right { display: flex; align-items: center; gap: 10px; flex: none; }

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(46, 229, 157, .26);
    background: rgba(46, 229, 157, .08);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: #b6f3da;
}

.icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .05);
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
    transition: .18s;
}
.icon-btn:hover { color: #fff; background: rgba(139, 92, 246, .22); border-color: rgba(139, 92, 246, .42); }

.burger {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, .05);
    color: var(--text);
    font-size: 16px;
    cursor: pointer;
}

.mobile-menu { display: none; flex-direction: column; gap: 2px; padding: 10px 0 18px; border-top: 1px solid var(--line); }
.mobile-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--muted); font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.mobile-menu a i { width: 18px; text-align: center; font-size: 13px; color: var(--purple); }
.mobile-menu.open { display: flex; }

@media (max-width: 1100px) {
    .links a span { display: none; }
}
@media (max-width: 980px) {
    .links { display: none; }
    .burger { display: grid; }
}
@media (max-width: 620px) {
    .wrap { width: calc(100% - 32px); }
    .logo small { display: none; }
    .online-pill { display: none; }
    .nav-right .btn.primary span { display: none; }
    .nav-right .btn.primary { padding: 10px 13px; }
}