/* =========================================================
   NEXO-V REGELWERK — MEGA ULTRA-BREITE PREMIUM EDITION
   Komplett überarbeitet: viel breiter, größer, mehr Impact, premium
========================================================= */

:root{
    --bg:#05070d;
    --bg2:#080d18;
    --panel:rgba(12,18,31,.82);
    --panel2:rgba(17,25,42,.92);
    --line:rgba(255,255,255,.09);
    --line2:rgba(116,185,255,.26);
    --text:#edf5ff;
    --muted:rgba(237,245,255,.68);
    --soft:rgba(237,245,255,.48);
    --blue:#37b7ff;
    --cyan:#00f0ff;
    --purple:#8b5cf6;
    --green:#35f58a;
    --red:#ff4d68;
    --gold:#ffd166;
    --orange:#fb923c;
    --radius:26px;
    --shadow:0 36px 100px rgba(0,0,0,.55);
    --glow:0 0 38px rgba(0,240,255,.14);
    --font-head:'Oswald',Arial,sans-serif;
    --font-body:'Barlow',Arial,sans-serif;
    --font-mono:'Share Tech Mono',monospace;
}

/* ================= PAGE LAYOUT (VIEL BREITERE) ================= */
.rules-page,
.faction-rules{
    position:relative;
    padding:110px 0 150px;
    background:
        radial-gradient(circle at 20% 0%, rgba(0,240,255,.08), transparent 55%),
        radial-gradient(circle at 85% 8%, rgba(139,92,246,.06), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(53,245,138,.03), transparent 40%);
}
.rules-inner{
    max-width:2400px;
    margin:0 auto;
    width:100%;
    padding:0 40px;
}
.rules-layout{
    display:grid;
    grid-template-columns:380px minmax(0,1fr);
    gap:60px;
    align-items:start;
}

/* ================= SIDEBAR (GEWÄCHSER) ================= */
.rules-sidebar{
    position:sticky;
    top:116px;
    max-height:calc(100vh - 140px);
    overflow:auto;
    padding:30px;
    border-radius:var(--radius);
    background:
        linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028)),
        rgba(7,11,21,.88);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter:blur(22px);
    scrollbar-width:thin;
    scrollbar-color:rgba(0,240,255,.50) rgba(255,255,255,.05);
}
.rules-sidebar::-webkit-scrollbar{width:9px}
.rules-sidebar::-webkit-scrollbar-thumb{background:rgba(0,240,255,.40);border-radius:99px}
.rules-sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.rules-sidebar-title{
    font-family:var(--font-mono);
    font-size:15px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(237,245,255,.62);
}
.rules-sidebar-title::after{
    content:" HARDCORE";
    color:var(--cyan);
    text-shadow:0 0 18px rgba(0,240,255,.55);
}
.law-search-box{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:62px;
    padding:0 20px;
    margin-bottom:24px;
    border-radius:20px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:.25s ease;
}
.law-search-box:focus-within{
    border-color:rgba(0,240,255,.50);
    box-shadow:0 0 32px rgba(0,240,255,.14), inset 0 1px 0 rgba(255,255,255,.08);
}
.law-search-box i{color:var(--cyan);font-size:15px}
.law-search-box input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font:600 16px var(--font-body);
}
.law-search-box input::placeholder{color:rgba(237,245,255,.42)}

/* Sidebar Gruppen */
.sidebar-group{margin-bottom:12px;padding:8px 8px 4px;border-radius:18px;transition:background .25s ease}
.sidebar-group:hover{background:rgba(255,255,255,.03)}
.rules-nav-btn.main{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px;
    border-radius:20px;
    cursor:pointer;
    user-select:none;
    overflow:hidden;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(237,245,255,.78);
    font-family:var(--font-mono);
    font-size:14px;
    letter-spacing:.09em;
    text-transform:uppercase;
    transition:.25s ease;
}
.rules-nav-btn.main::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:linear-gradient(90deg, rgba(0,240,255,.20), rgba(139,92,246,.15), transparent);
    transition:.25s ease;
}
.rules-nav-btn.main span{position:relative;z-index:1}
.rules-nav-btn.main:hover,
.sidebar-group.open .rules-nav-btn.main{
    color:#fff;
    border-color:rgba(0,240,255,.38);
    transform:translateX(4px);
    box-shadow:0 0 36px rgba(0,240,255,.12);
}
.rules-nav-btn.main:hover::before,
.sidebar-group.open .rules-nav-btn.main::before{opacity:1}
.rules-nav-btn.main .arrow{color:var(--cyan);transition:.3s ease;font-size:18px;line-height:1}
.sidebar-group.open .arrow{transform:rotate(180deg)}

/* Sub-Buttons */
.sidebar-sub{
    max-height:0;
    opacity:0;
    overflow:hidden;
    padding-left:16px;
    transition:max-height .38s ease, opacity .28s ease, margin .28s ease;
}
.sidebar-group.open .sidebar-sub{
    max-height:900px;
    opacity:1;
    margin:12px 0 16px;
}

.rules-sub-btn{
    position:relative;
    display:flex;
    align-items:center;
    min-height:52px;
    margin:7px 0;
    padding:12px 16px 12px 22px;
    border-radius:16px;
    border-left:3px solid transparent;
    color:rgba(237,245,255,.62);
    font-size:15px;
    line-height:1.3;
    font-weight:600;
    cursor:pointer;
    transition:.22s ease;
}
.rules-sub-btn::before{
    content:"";
    width:8px;height:8px;
    border-radius:999px;
    margin-right:12px;
    background:rgba(237,245,255,.28);
    box-shadow:0 0 0 rgba(0,240,255,0);
    transition:.22s ease;
}
.rules-sub-btn:hover{
    color:#fff;
    background:rgba(255,255,255,.05);
    transform:translateX(4px);
}
.rules-sub-btn:hover::before{
    background:var(--cyan);
    box-shadow:0 0 20px rgba(0,240,255,.62);
}
.rules-sub-btn.active{
    color:#fff;
    background:linear-gradient(90deg,rgba(0,240,255,.15),rgba(139,92,246,.10));
    border-left-color:var(--cyan);
    box-shadow:inset 0 0 0 1px rgba(0,240,255,.16);
}
.rules-sub-btn.active::before{
    background:var(--cyan);
    box-shadow:0 0 22px rgba(0,240,255,.78);
}

/* Legend & Footer */
.rules-legend{
    display:grid;
    gap:12px;
    margin:24px 0;
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.042);
    border:1px solid rgba(255,255,255,.085);
    color:rgba(237,245,255,.70);
    font-size:14px;
    font-family:var(--font-mono);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.rules-legend span{
    display:inline-block;
    width:11px;
    height:11px;
    border-radius:999px;
    margin-right:9px;
}
.low-dot{background:var(--green);box-shadow:0 0 16px rgba(53,245,138,.52)}
.mid-dot{background:var(--gold);box-shadow:0 0 16px rgba(255,209,102,.52)}
.high-dot{background:var(--red);box-shadow:0 0 16px rgba(255,77,104,.52)}
.extreme-dot{background:var(--purple);box-shadow:0 0 16px rgba(168,85,247,.55)}
.rules-sidebar-footer{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.10);
}
.sidebar-info{
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(237,245,255,.55);
    font-size:14px;
    font-family:var(--font-mono);
}
.sidebar-info i{color:var(--cyan)}

/* ================= CONTENT / CARDS ================= */
#rule-content{min-width:0}
.law-view,
.premium-rule-view{
    position:relative;
    display:grid;
    gap:28px;
    animation:ruleFade .38s ease both;
}
.rule-reveal-in{animation:ruleRevealIn .36s ease both}
@keyframes ruleFade{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes ruleRevealIn{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

/* ================= HERO CARD (GRÖSSER & DRAMA) ================= */
.rule-hero-card,
.law-main{
    position:relative;
    overflow:hidden;
    border-radius:34px;
    padding:54px 60px;
    background:
        radial-gradient(circle at 12% 0%,rgba(0,240,255,.25),transparent 48%),
        radial-gradient(circle at 92% 0%,rgba(139,92,246,.28),transparent 45%),
        linear-gradient(145deg,rgba(17,25,42,.95),rgba(5,8,16,.95));
    border:1px solid rgba(255,255,255,.13);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
}
.rule-hero-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(255,255,255,.09),transparent 24% 76%,rgba(255,255,255,.06)),
        linear-gradient(135deg,transparent 0 48%, rgba(0,240,255,.13) 49% 51%, transparent 52%);
    opacity:.65;
}
.rule-hero-card::after{
    content:"";
    position:absolute;
    right:48px;
    top:38px;
    width:140px;
    height:140px;
    border-radius:50%;
    border:1px solid rgba(0,240,255,.32);
    box-shadow:
        0 0 90px rgba(0,240,255,.20),
        inset 0 0 50px rgba(0,240,255,.12);
    animation:heroOrbPulse 4.5s ease-in-out infinite;
}
@keyframes heroOrbPulse{
    0%,100%{transform:scale(1);opacity:.7}
    50%{transform:scale(1.10);opacity:1}
}
.rule-kicker{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-bottom:20px;
    padding:11px 18px;
    border-radius:999px;
    border:1px solid rgba(0,240,255,.32);
    background:rgba(0,240,255,.11);
    color:var(--cyan);
    font-family:var(--font-mono);
    font-size:14px;
    letter-spacing:.19em;
    text-transform:uppercase;
    box-shadow:0 0 20px rgba(0,240,255,.10);
}
.rule-kicker::before{content:"◆";font-size:12px;color:var(--purple)}
.law-title{
    position:relative;
    z-index:1;
    margin:0;
    font-family:var(--font-head);
    text-transform:uppercase;
    font-size:clamp(44px,5.4vw,90px);
    line-height:1;
    letter-spacing:.038em;
    color:#fff;
    text-shadow:0 24px 65px rgba(0,0,0,.55);
}
.rule-hero-sub{
    position:relative;
    z-index:1;
    margin-top:22px;
    color:rgba(237,245,255,.72);
    font-family:var(--font-mono);
    font-size:15px;
    letter-spacing:.17em;
    text-transform:uppercase;
}
.law-text{color:var(--muted);font-size:21px;line-height:1.85;margin-top:22px;font-weight:500}

/* ================= INFO CARDS (GRÖSSER) ================= */
.rule-info-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:36px 40px;
    border:1px solid rgba(255,255,255,.11);
    background:linear-gradient(145deg,rgba(18,25,39,.94),rgba(8,12,22,.96));
    box-shadow:0 26px 75px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
    transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease;
}
.rule-info-card::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;width:7px;
    background:rgba(255,255,255,.22);
}
.rule-info-card::after{
    content:"";
    position:absolute;
    inset:-1px;
    opacity:.6;
    pointer-events:none;
    background:radial-gradient(circle at 0 0, rgba(255,255,255,.13), transparent 40%);
}
.rule-info-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.20);
    box-shadow:0 34px 92px rgba(0,0,0,.48), var(--glow);
}
.rule-info-title{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
    font-family:var(--font-head);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.085em;
    font-size:24px;
}
.rule-info-title span{
    width:54px;height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 34px rgba(0,0,0,.30);
    font-size:28px;
}
.rule-info-text{
    position:relative;
    z-index:1;
    color:rgba(237,245,255,.92);
    font-size:20px;
    line-height:1.9;
    font-weight:500;
}

/* Definition Card */
.definition-card{
    background:
        radial-gradient(circle at top left,rgba(55,183,255,.26),transparent 48%),
        linear-gradient(145deg,rgba(14,27,48,.96),rgba(7,12,24,.97));
    border-color:rgba(55,183,255,.40);
}
.definition-card::before{background:linear-gradient(180deg,#7dd3fc,#2563eb)}
.definition-card .rule-info-title{color:#9bdcff}
.definition-card .rule-info-title span{background:rgba(55,183,255,.17)}

/* Example Grid */
.rule-example-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

/* Allowed Card */
.allowed-card{
    background:
        radial-gradient(circle at top left,rgba(53,245,138,.26),transparent 48%),
        linear-gradient(145deg,rgba(8,36,25,.96),rgba(7,15,20,.98));
    border-color:rgba(53,245,138,.42);
}
.allowed-card::before{background:linear-gradient(180deg,#6dffad,#16a34a)}
.allowed-card .rule-info-title{color:#78ffb4}
.allowed-card .rule-info-title span{background:rgba(53,245,138,.16)}

/* Forbidden Card */
.forbidden-card{
    background:
        radial-gradient(circle at top left,rgba(255,77,104,.29),transparent 48%),
        linear-gradient(145deg,rgba(42,11,20,.96),rgba(16,10,18,.98));
    border-color:rgba(255,77,104,.46);
}
.forbidden-card::before{background:linear-gradient(180deg,#ff8a9b,#dc2626)}
.forbidden-card .rule-info-title{color:#ff9bad}
.forbidden-card .rule-info-title span{background:rgba(255,77,104,.16)}

/* Hint Card */
.hint-card{
    background:
        radial-gradient(circle at top left,rgba(255,209,102,.28),transparent 48%),
        linear-gradient(145deg,rgba(42,31,10,.96),rgba(17,14,8,.98));
    border-color:rgba(255,209,102,.42);
}
.hint-card::before{background:linear-gradient(180deg,#ffe08a,#f59e0b)}
.hint-card .rule-info-title{color:#ffe08a}
.hint-card .rule-info-title span{background:rgba(255,209,102,.16)}

/* ================= PENALTY CARD (GRÖSSER) ================= */
.law-penalty-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:36px 40px;
    background:linear-gradient(145deg,rgba(15,21,34,.96),rgba(7,10,18,.98));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 28px 78px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.07);
}
.law-penalty-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.9;
    pointer-events:none;
    background:radial-gradient(circle at 0 0, rgba(255,255,255,.11), transparent 40%);
}
.penalty-header,
.penalty-note,
.penalty-desc{position:relative;z-index:1}
.penalty-header{
    font-family:var(--font-head);
    text-transform:uppercase;
    letter-spacing:.085em;
    font-size:24px;
    color:#fff;
    margin-bottom:14px;
}
.penalty-note{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    padding:11px 18px;
    border-radius:999px;
    font-family:var(--font-mono);
    font-weight:700;
    letter-spacing:.09em;
    font-size:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 0 20px rgba(0,0,0,.2);
}
.penalty-desc{color:rgba(237,245,255,.78);font-size:18px;line-height:1.8}

.law-penalty-card.low{
    border-color:rgba(53,245,138,.46);
    background:
        radial-gradient(circle at top left,rgba(53,245,138,.22),transparent 45%),
        linear-gradient(145deg,rgba(9,31,23,.96),rgba(7,10,18,.98));
}
.law-penalty-card.low .penalty-note{color:#78ffb4}
.law-penalty-card.mid{
    border-color:rgba(255,209,102,.48);
    background:
        radial-gradient(circle at top left,rgba(255,209,102,.24),transparent 45%),
        linear-gradient(145deg,rgba(35,27,10,.96),rgba(7,10,18,.98));
}
.law-penalty-card.mid .penalty-note{color:#ffe08a}
.law-penalty-card.high{
    border-color:rgba(255,77,104,.54);
    background:
        radial-gradient(circle at top left,rgba(255,77,104,.26),transparent 45%),
        linear-gradient(145deg,rgba(36,10,18,.96),rgba(7,10,18,.98));
}
.law-penalty-card.high .penalty-note{color:#ff9bad}
.law-penalty-card.extreme{
    border-color:rgba(168,85,247,.64);
    background:
        radial-gradient(circle at top left,rgba(168,85,247,.32),transparent 45%),
        linear-gradient(145deg,rgba(29,13,49,.96),rgba(7,10,18,.98));
}
.law-penalty-card.extreme .penalty-note{color:#d8b4fe}

/* ================= FOOTER ================= */
#main-footer{
    position:relative;
    padding:70px 28px;
    border-top:1px solid rgba(255,255,255,.10);
    background:rgba(2,4,9,.66);
    text-align:center;
}
.footer-logo{
    font-family:var(--font-head);
    font-size:42px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:12px;
}
.footer-logo span{color:var(--cyan);text-shadow:0 0 28px rgba(0,240,255,.55)}
.footer-copy{
    color:rgba(237,245,255,.56);
    font-family:var(--font-mono);
    font-size:14px;
    margin-bottom:22px;
}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.footer-links a{
    color:rgba(237,245,255,.64);
    font-size:15px;
    transition:.22s ease;
}
.footer-links a:hover{color:var(--cyan)}

/* ================= PREMIUM SEARCHBAR ================= */
.nexo-rule-search-wrap{
    position:relative;
    margin:0 0 42px;
    padding:32px;
    overflow:visible;
    border-radius:36px;
    background:
        radial-gradient(circle at 18% 0%, rgba(55,183,255,.28), transparent 40%),
        radial-gradient(circle at 82% 100%, rgba(139,92,246,.26), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.032)),
        rgba(7,11,21,.84);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:
        0 44px 120px rgba(0,0,0,.60),
        0 0 62px rgba(0,240,255,.14),
        inset 0 1px 0 rgba(255,255,255,.13);
    backdrop-filter:blur(26px);
    isolation:isolate;
}
.nexo-rule-search-wrap::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1.5px;
    background:linear-gradient(115deg,
        transparent,
        rgba(0,240,255,.68),
        transparent,
        rgba(139,92,246,.48),
        transparent);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    -webkit-mask-size:100% 100%, 100% 100%;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center, center;
    pointer-events:none;
    opacity:.80;
    animation:nexoSearchBorder 5.5s linear infinite;
}
@keyframes nexoSearchBorder{
    0%{filter:hue-rotate(0deg);opacity:.58}
    50%{filter:hue-rotate(60deg);opacity:1}
    100%{filter:hue-rotate(0deg);opacity:.58}
}

.nexo-search-orb{
    position:absolute;
    width:240px;
    height:240px;
    border-radius:999px;
    filter:blur(36px);
    opacity:.26;
    z-index:-1;
    pointer-events:none;
    animation:nexoFloatOrb 7.5s ease-in-out infinite;
}
.nexo-search-orb.orb-a{left:-90px;top:-95px;background:#00f0ff}
.nexo-search-orb.orb-b{right:-94px;bottom:-102px;background:#8b5cf6;animation-delay:-2.8s}
@keyframes nexoFloatOrb{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(26px,16px,0) scale(1.16)}
}

.nexo-search-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:22px;
    margin-bottom:24px;
}
.nexo-search-kicker{
    font-family:var(--font-mono, monospace);
    letter-spacing:.20em;
    font-size:14px;
    color:var(--cyan,#00f0ff);
    text-transform:uppercase;
    text-shadow:0 0 20px rgba(0,240,255,.46);
    margin-bottom:8px;
}
.nexo-search-head h2{
    margin:0;
    font-family:var(--font-head,'Oswald',Arial,sans-serif);
    text-transform:uppercase;
    letter-spacing:.050em;
    color:#fff;
    font-size:clamp(32px,3.8vw,56px);
    line-height:1;
    text-shadow:0 16px 40px rgba(0,0,0,.35);
}
.nexo-search-count{
    flex:0 0 auto;
    padding:13px 20px;
    border-radius:999px;
    color:#dff9ff;
    font-family:var(--font-mono, monospace);
    font-size:15px;
    background:rgba(0,240,255,.13);
    border:1px solid rgba(0,240,255,.28);
    box-shadow:0 0 28px rgba(0,240,255,.16);
}
.nexo-search-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:18px;
    min-height:82px;
    padding:0 22px;
    border-radius:26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.040)),
        rgba(5,9,17,.78);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 24px 64px rgba(0,0,0,.30);
    overflow:hidden;
}
.nexo-search-box:focus-within{
    border-color:rgba(0,240,255,.56);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 0 5px rgba(0,240,255,.12),
        0 26px 70px rgba(0,0,0,.40);
}
.nexo-search-line{
    position:absolute;
    left:-40%;
    bottom:0;
    width:40%;
    height:2px;
    background:linear-gradient(90deg, transparent, #00f0ff, #8b5cf6, transparent);
    opacity:.92;
    animation:nexoSearchLine 3.2s ease-in-out infinite;
}
@keyframes nexoSearchLine{
    0%{left:-40%}
    55%{left:100%}
    100%{left:100%}
}
.nexo-search-icon{
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:18px;
    color:#00131a;
    background:linear-gradient(135deg,#00f0ff,#37b7ff);
    box-shadow:0 0 34px rgba(0,240,255,.40);
    animation:nexoSearchIconPulse 2.6s ease-in-out infinite;
}
@keyframes nexoSearchIconPulse{
    0%,100%{transform:scale(1);box-shadow:0 0 28px rgba(0,240,255,.36)}
    50%{transform:scale(1.08);box-shadow:0 0 46px rgba(0,240,255,.58)}
}
#rule-global-search{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:#f4fbff;
    font-family:var(--font-body,'Barlow',Arial,sans-serif);
    font-size:22px;
    letter-spacing:.015em;
}
#rule-global-search::placeholder{color:rgba(237,245,255,.46)}
.nexo-search-clear{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:17px;
    background:rgba(255,255,255,.055);
    color:rgba(237,245,255,.80);
    cursor:pointer;
    transition:.24s ease;
}
.nexo-search-clear:hover{
    color:#fff;
    border-color:rgba(255,77,104,.55);
    background:rgba(255,77,104,.16);
    transform:rotate(90deg) scale(1.08);
}
.nexo-search-tags{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:24px;
}
.nexo-search-tags button{
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    padding:11px 18px;
    background:rgba(255,255,255,.055);
    color:rgba(237,245,255,.76);
    font-family:var(--font-mono, monospace);
    font-size:14px;
    cursor:pointer;
    transition:.24s ease;
}
.nexo-search-tags button:hover{
    color:#fff;
    border-color:rgba(0,240,255,.46);
    background:rgba(0,240,255,.13);
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(0,240,255,.14);
}

/* ================= SUGGESTIONS ================= */
.nexo-suggestions{
    position:absolute;
    left:32px;
    right:32px;
    top:calc(100% - 14px);
    z-index:50;
    display:none;
    flex-direction:column;
    gap:14px;
    padding:20px;
    border-radius:28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.042)),
        rgba(6,10,19,.97);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
        0 40px 100px rgba(0,0,0,.70),
        0 0 58px rgba(0,240,255,.14);
    backdrop-filter:blur(26px);
    max-height:480px;
    overflow:auto;
}
.nexo-suggestions.show{
    display:flex;
    animation:nexoSuggestionsIn .26s ease both;
}
@keyframes nexoSuggestionsIn{
    from{opacity:0;transform:translateY(-12px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.nexo-suggestion-item{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    width:100%;
    text-align:left;
    padding:20px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
    transition:.24s ease;
    overflow:hidden;
}
.nexo-suggestion-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,240,255,.16), transparent 52%, rgba(139,92,246,.14));
    opacity:0;
    transition:.24s ease;
}
.nexo-suggestion-item:hover{
    transform:translateX(7px);
    border-color:rgba(0,240,255,.44);
    box-shadow:0 20px 42px rgba(0,0,0,.36);
}
.nexo-suggestion-item:hover::before{opacity:1}
.suggestion-dot{
    position:relative;
    width:16px;
    height:16px;
    border-radius:999px;
    background:#00f0ff;
    box-shadow:0 0 20px #00f0ff, 0 0 38px rgba(0,240,255,.46);
    animation:suggestionDotPulse 1.9s ease-in-out infinite;
}
@keyframes suggestionDotPulse{
    0%,100%{transform:scale(1);opacity:.78}
    50%{transform:scale(1.45);opacity:1}
}
.suggestion-main{
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:5px;
}
.suggestion-main strong{
    font-family:var(--font-head,'Oswald',Arial,sans-serif);
    font-size:24px;
    letter-spacing:.028em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.suggestion-main small{
    color:rgba(237,245,255,.60);
    font-family:var(--font-body,'Barlow',Arial,sans-serif);
    font-size:15px;
}
.suggestion-main mark{
    color:#00131a;
    background:linear-gradient(135deg,#00f0ff,#ffd166);
    padding:0 6px;
    border-radius:6px;
    font-weight:700;
}
.suggestion-level{
    position:relative;
    padding:9px 14px;
    border-radius:999px;
    font-family:var(--font-mono, monospace);
    font-size:13px;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.08);
}
.suggestion-level.low{color:#35f58a;border-color:rgba(53,245,138,.30);background:rgba(53,245,138,.11)}
.suggestion-level.mid{color:#ffd166;border-color:rgba(255,209,102,.30);background:rgba(255,209,102,.11)}
.suggestion-level.high{color:#ff8a9a;border-color:rgba(255,77,104,.30);background:rgba(255,77,104,.11)}
.suggestion-level.extreme{color:#ff4d68;border-color:rgba(255,77,104,.50);background:rgba(255,77,104,.18)}
.nexo-suggestion-empty{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:22px;
    border-radius:22px;
    border:1px solid rgba(255,209,102,.26);
    background:rgba(255,209,102,.11);
    color:#fff;
}
.nexo-suggestion-empty span{font-size:30px}
.nexo-suggestion-empty strong{display:block;margin-bottom:6px;color:#ffd166;font-size:17px}
.nexo-suggestion-empty small{display:block;color:rgba(237,245,255,.70);font-size:15px}

/* ================= RESPONSIVE ================= */
@media (max-width: 1600px){
    .rules-inner{max-width:100%}
}
@media (max-width: 1280px){
    .nav-links{display:none;position:absolute;top:86px;left:0;right:0;padding:14px;background:rgba(6,10,19,.96);border:1px solid rgba(255,255,255,.1);border-radius:22px;box-shadow:0 22px 70px rgba(0,0,0,.5);flex-direction:column;align-items:stretch}
    .nav-dropdown-menu{position:static;opacity:1;pointer-events:auto;transform:none;display:none;margin:5px 0;background:rgba(255,255,255,.04);box-shadow:none}
    .nav-dropdown:hover .nav-dropdown-menu{display:block}
    .nav-mobile-toggle{display:block}
}
@media (max-width: 1100px){
    .rules-layout{grid-template-columns:1fr;gap:36px}
    .rules-sidebar{
        position:relative;
        top:auto;
        max-height:none;
    }
}
@media (max-width: 760px){
    .nav-actions{display:none}
    .rules-page{padding:65px 14px 95px}
    .rules-sidebar{padding:22px;border-radius:22px}
    .rule-example-grid{grid-template-columns:1fr;gap:16px}
    .rule-hero-card,
    .law-main{padding:30px 26px;border-radius:26px}
    .rule-info-card,
    .law-penalty-card{padding:26px 24px;border-radius:22px}
    .rule-info-title{font-size:20px}
    .rule-info-title span{width:44px;height:44px;border-radius:14px;font-size:24px}
    .rule-info-text{font-size:17px;line-height:1.8}
    .law-title{font-size:clamp(36px,12vw,56px)}
    .btn-primary,
    .btn-secondary{width:100%}
    .nexo-rule-search-wrap{padding:24px;border-radius:26px}
    .nexo-search-box{min-height:70px}
    #rule-global-search{font-size:18px}
    .nexo-suggestions{left:24px;right:24px}
    .nexo-search-head{align-items:flex-start;flex-direction:column}
    .nexo-search-count{align-self:flex-start}
}
@media (max-width: 560px){
    .nexo-rule-search-wrap{padding:20px;border-radius:24px}
    .nexo-search-icon{display:none}
    .nexo-search-tags button{font-size:13px;padding:10px 14px}
    .nexo-suggestion-item{grid-template-columns:auto minmax(0,1fr)}
    .suggestion-level{grid-column:2;justify-self:start}
}

/* Fallback: alte Klasse unterstützt */
.faction-rules .rules-inner,
.faction-rules .rules-layout,
.faction-rules .rules-sidebar{ }