/* ==========================================================================
   BANGERCITY RP – Theme „Los Santos Sunset“ (Relaunch 2026, Virus-Story)
   Wird NACH dem jeweiligen Seiten-Stylesheet geladen (home.css, nav.css +
   wiki.css, forum.css, news.css) und legt dieselben Farben, Kopfzeile und
   Knöpfe über alle Bereiche. Seitenspezifisches bleibt in den Seiten-CSS.
   ========================================================================== */

/* Schreibschrift für „Los Santos“. Liegt sie unter assets/vendor/fonts/script.woff2,
   wird sie genutzt – sonst greifen die System-Schreibschriften darunter. */
@font-face {
    font-family: 'BC Script';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Mr Dafoe'), url('../vendor/fonts/script.woff2') format('woff2');
}

:root {
    --bg:        #0a0612;
    --bg-2:      #0f0919;
    --panel:     #140c22;
    --panel-2:   #1a1029;
    --panel-3:   #211433;
    --line:      rgba(255, 255, 255, .07);
    --line-2:    rgba(255, 255, 255, .13);

    --text:      #f1ecfa;
    --muted:     #a59bbd;
    --dim:       #746a8f;

    --purple:    #a259ff;
    --purple-2:  #7c3aed;
    --cyan:      #38d9f5;
    --pink:      #ff2e93;
    --magenta:   #e13cf0;
    --orange:    #ff7a3d;
    --green:     #2ee59d;
    --red:       #ff3d5e;
    --yellow:    #ffc83d;
    --hazard:    #ff2e55;

    --grad:      linear-gradient(120deg, #ff2e93 0%, #e13cf0 55%, #a259ff 100%);
    --grad-text: linear-gradient(100deg, #ff4fa3 0%, #f03ce0 50%, #b46bff 100%);
    --grad-sun:  linear-gradient(180deg, #ffb35c 0%, #ff4f8b 45%, #b23cf0 100%);
    --glow-pink: 0 0 0 1px rgba(255, 46, 147, .35), 0 12px 34px -10px rgba(255, 46, 147, .65);

    --font-script: 'BC Script', 'Mr Dafoe', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive;
}

::selection { background: rgba(255, 46, 147, .45); color: #fff; }

html { scrollbar-color: rgba(255, 46, 147, .45) var(--bg); }

body, body.fx { background: var(--bg); color: var(--text); }

/* Sonnenuntergangs-Nebel statt des alten Violett-Schleiers */
body::before, body.fx::before {
    background:
        radial-gradient(1000px 560px at 8% -8%,  rgba(255, 46, 147, .14), transparent 70%),
        radial-gradient(900px 520px at 95% 4%,   rgba(162, 89, 255, .14), transparent 70%),
        radial-gradient(900px 600px at 50% 112%, rgba(255, 122, 61, .07), transparent 70%);
}

.grad-text, .fx .grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.script {
    font-family: var(--font-script);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ================================================================ Knöpfe */
.btn.primary, .fx .btn.primary {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--glow-pink);
}
.btn.primary:hover, .fx .btn.primary:hover { box-shadow: 0 0 0 1px rgba(255, 46, 147, .5), 0 18px 44px -10px rgba(255, 46, 147, .8); }
.btn.discord { background: rgba(88, 101, 242, .14); border-color: rgba(120, 132, 255, .42); }
.btn.hazard {
    background: rgba(255, 46, 85, .12);
    border-color: rgba(255, 46, 85, .55);
    color: #ffd2da;
}
.btn.hazard:hover { background: rgba(255, 46, 85, .22); box-shadow: 0 12px 30px -12px rgba(255, 46, 85, .8); }

/* ============================================================ Kopfzeile */
.nav, .fx .nav {
    background: linear-gradient(180deg, rgba(10, 6, 18, .88), rgba(10, 6, 18, .66));
    border-bottom: 0;
}
/* Neon-Linie unter der Kopfzeile: pink in der Mitte, zu den Rändern auslaufend */
.nav::after, .fx .nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 46, 147, .7) 30%, rgba(162, 89, 255, .7) 70%, transparent);
    box-shadow: 0 0 12px rgba(255, 46, 147, .6);
    pointer-events: none;
}
.nav.scrolled, .fx .nav.scrolled { background: rgba(10, 6, 18, .95); }

.nav .bar, .fx .nav .bar { gap: 18px; }   /* Höhe nicht ändern: Wiki-Seitenleiste und Forenleiste kleben darunter */

/* SVG-Schriftzug (assets/images/logo.svg) – ersetzt Quadrat-Logo + Text */
.logo.logo-svg img, .fx .nav .logo.logo-svg img {
    width: auto;
    height: 50px;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
    filter: drop-shadow(0 0 12px rgba(243, 36, 191, .45));
    transition: filter .2s;
}
.logo.logo-svg:hover img { filter: drop-shadow(0 0 18px rgba(243, 36, 191, .8)); }
.logo.foot-logo img { height: 64px; }
.top .logo.logo-svg img { height: 40px; }
.top .logo.logo-svg span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ff8cc4; }
.nav .logo b, .fx .nav .logo b { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav .logo small, .fx .nav .logo small { font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #ff8cc4; opacity: .8; }

.nav .links, .fx .nav .links { gap: 4px; margin: 0 auto; flex: 0 1 auto; }
.nav .links a, .fx .nav .links a {
    position: relative;
    padding: 10px 13px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b4a9cc;
}
.nav .links a i, .fx .nav .links a i { font-size: 11.5px; opacity: .7; }
.nav .links a:hover, .fx .nav .links a:hover { color: #fff; background: rgba(255, 46, 147, .08); }
.nav .links a:hover i { opacity: 1; color: #ff8cc4; }
.nav .links a.on, .fx .nav .links a.on {
    color: #fff;
    background: var(--grad);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 26px -10px rgba(255, 46, 147, .95);
}
.nav .links a.on i, .fx .nav .links a.on i { opacity: 1; color: #fff; }

.online-pill, .fx .online-pill {
    padding: 8px 13px;
    border: 1px solid rgba(46, 229, 157, .3);
    background: rgba(46, 229, 157, .07);
    color: #b6f3da;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.nav-right, .fx .nav-right { margin-left: auto; }   /* bleibt rechts, auch wenn das Menü ausgeblendet ist */
.icon-btn, .fx .icon-btn { border-radius: 11px; }
.icon-btn:hover, .fx .icon-btn:hover { color: #fff; background: rgba(255, 46, 147, .16); border-color: rgba(255, 46, 147, .42); }
#nav-portal { padding: 11px 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 11px; }

.mobile-menu a { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.mobile-menu a i { color: var(--pink); }

/* Die Kopfzeile nutzt mehr Breite als der Inhalt (wie in der Vorlage). Was
   nicht mehr passt, fällt gestaffelt weg – nie seitlich scrollen. */
.nav .wrap, .fx .nav .wrap { width: min(100% - 40px, 1480px); }
@media (max-width: 1560px) {
    .nav .links a i, .fx .nav .links a i { display: none; }
    .nav .links a, .fx .nav .links a { padding: 10px 12px; }
}
@media (max-width: 1360px) {
    .online-pill, .fx .online-pill { display: none; }
}
@media (max-width: 1180px) {
    .nav .logo small, .fx .nav .logo small { display: none; }
}
@media (max-width: 620px) {
    .nav .logo.logo-svg img { height: 40px; }
    .top .logo.logo-svg span { display: none; }
}
@media (max-width: 1100px) {
    .nav .links, .fx .nav .links { display: none; }
    .burger, .fx .burger { display: grid; }
    /* Forum bringt die Burger-Regeln erst ab 900 px mit */
    .fx .burger { place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text); cursor: pointer; }
    .fx .mobile-menu.open { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 14px; }
}

/* ============================================================ Kleinkram */
/* Kicker über Überschriften als kleine Neon-Marke */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 46, 147, .35);
    background: rgba(255, 46, 147, .08);
    color: #ff8cc4;
    font-size: 10.5px;
    letter-spacing: .2em;
}
.kicker i { margin: 0; }
.sec-head h2, .story-text h2, .border-text h2 { text-transform: none; letter-spacing: -.025em; }
.go { transition: .2s; }

.led.on  { background: var(--green); }

/* Warn-/Gefahrenstreifen, z. B. über dem Lagebericht */
.hazard-tape {
    height: 6px;
    background: repeating-linear-gradient(-45deg, #ff2e55 0 14px, #1a0d14 14px 28px);
    opacity: .8;
}

/* Modale & Toasts im neuen Ton */
.modal { background: var(--panel-2); border-color: rgba(255, 46, 147, .2); }
.modal a, .cookie-txt a { color: var(--pink); }