/* ═══════════════════════════════════════════════════════════════
   LuxRP Reegelwierk — Dark, gutt liesbar (Géigendeel vu Google Docs)
   Design-Tokens ugeleent un whitelist/style.css, bewosst eegestänneg.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --bg:        #15171e;
    --bg-2:      #111319;
    --panel:     #15171e;
    --card:      rgba(28, 31, 40, .72);
    --border:    #262a35;
    --border-2:  #23262f;
    --t0:        #f2f0f5;   /* Haapttext */
    --t1:        #c2c5d1;   /* Fließtext */
    --t2:        #8b8fa0;   /* gedämpft */
    --gold:      #d9bb63;
    --gold-2:    #e8cd85;
    --gold-tint: rgba(201, 165, 62, .14);
    --font-head: "Spectral", Georgia, serif;
    --font-body: "Public Sans", "Segoe UI", system-ui, sans-serif;
    --maxw:      760px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(201, 165, 62, .05), transparent 60%),
        var(--bg);
    color: var(--t1);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(201, 165, 62, .3); color: #fff; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.rw-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px 22px;
    background: rgba(17, 19, 25, .82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-2);
    flex-wrap: wrap;
}
.rw-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--t0);
    text-decoration: none;
}
.rw-brand-logo { width: 26px; height: 26px; border-radius: 6px; }
.rw-topnav { display: flex; gap: .35rem; flex-wrap: wrap; }
.rw-topnav a {
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--t2);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: color .15s, background .15s;
}
.rw-topnav a:hover { color: var(--t0); background: rgba(255, 255, 255, .04); }
.rw-topnav a.active { color: var(--gold); background: var(--gold-tint); }

/* ── Layout ─────────────────────────────────────────────────────── */
.rw-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 22px 80px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ── Inhaltsverzeechnis ─────────────────────────────────────────── */
.rw-toc {
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.rw-toc-toggle { display: none; }
.rw-toc-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--t2);
    margin-bottom: .75rem;
}
.rw-toc-nav { display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--border); }
.rw-toc-nav a {
    color: var(--t2);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.4;
    padding: 5px 0 5px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.rw-toc-nav a:hover { color: var(--t0); }
.rw-toc-nav a.active { color: var(--gold); border-left-color: var(--gold); font-weight: 600; }
.rw-toc-l3 { padding-left: 28px !important; font-size: .82rem !important; }

/* ── Inhalt ─────────────────────────────────────────────────────── */
.rw-content { max-width: var(--maxw); }
.rw-doc-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.6vw, 2.6rem);
    line-height: 1.2;
    color: var(--t0);
    margin: 0 0 1.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
}

/* Fließtext-Inhalt (aus dem sanitizéierten HTML) */
.rw-body {
    font-size: 1.05rem;
    /* Laang ononnerbrach Wierder/Links ëmbriechen, amplaz iwwer de Rand
       vum Bildschirm erauszelafen (besonnesch op breede Monitoren). */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
/* Zousätzlech Sécherung: den Inhaltsberäich net iwwer seng Spalt erausdrécken */
.rw-content { min-width: 0; overflow-wrap: break-word; }
.rw-body h1, .rw-body h2, .rw-body h3 {
    font-family: var(--font-head);
    color: var(--t0);
    line-height: 1.3;
    scroll-margin-top: 90px;
}
.rw-body h1 { font-size: 1.8rem; font-weight: 600; margin: 2.6rem 0 1rem; }
.rw-body h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 2.4rem 0 .9rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border-2);
}
.rw-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.rw-body h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-2);
    margin: 1.9rem 0 .7rem;
}
.rw-body p { margin: 0 0 1.1rem; color: var(--t1); }
.rw-body strong, .rw-body b { color: var(--t0); font-weight: 700; }
.rw-body em, .rw-body i { color: var(--t1); }
.rw-body a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 165, 62, .4); }
.rw-body a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.rw-body ul, .rw-body ol { margin: 0 0 1.3rem; padding-left: 1.5rem; }
.rw-body li { margin: 0 0 .7rem; padding-left: .4rem; color: var(--t1); }
.rw-body ol { counter-reset: rw-item; list-style: none; padding-left: 0; }
.rw-body ol > li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .85rem;
}
/* Quill späichert Bullet- an nummréiert Punkte béid als <li> an engem <ol>
   (kee <ul>!) — nëmmen d'Attribut data-list="bullet" ënnerscheet se. Nëmmen
   déi "richteg" nummréiert Punkten (ouni data-list="bullet") zielen mat. */
.rw-body ol > li:not([data-list="bullet"]) {
    counter-increment: rw-item;
}
.rw-body ol > li:not([data-list="bullet"])::before {
    content: counter(rw-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
}
.rw-body ol > li[data-list="bullet"] {
    padding-left: 1.6rem;
}
.rw-body ol > li[data-list="bullet"]::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .82rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
/* Verschachtelt Absätz an engem <li> (z.B. Ënnerpunkten) */
.rw-body li p { margin: .4rem 0; }
.rw-body ul { list-style: none; padding-left: 0; }
.rw-body ul > li { position: relative; padding-left: 1.6rem; }
.rw-body ul > li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .82rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.rw-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.3rem;
    background: var(--card);
    border-left: 3px solid var(--gold);
    border-radius: 0 12px 12px 0;
    color: var(--t1);
}
.rw-body blockquote p:last-child { margin-bottom: 0; }
.rw-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.4rem 0;
    border: 1px solid var(--border);
}

/* ── Editor-Formater (Quill-Klassen) op der ëffentlecher Säit ──────── */
.rw-body .ql-align-center  { text-align: center; }
.rw-body .ql-align-right   { text-align: right; }
.rw-body .ql-align-justify { text-align: justify; }
.rw-body .ql-indent-1 { padding-left: 3em; }
.rw-body .ql-indent-2 { padding-left: 6em; }
.rw-body .ql-indent-3 { padding-left: 9em; }
.rw-body .ql-indent-4 { padding-left: 12em; }
.rw-body .ql-indent-5 { padding-left: 15em; }
.rw-body .ql-indent-6 { padding-left: 18em; }
.rw-body .ql-indent-7 { padding-left: 21em; }
.rw-body .ql-indent-8 { padding-left: 24em; }
.rw-body .ql-size-small { font-size: .82em; }
.rw-body .ql-size-large { font-size: 1.5em; }
.rw-body .ql-size-huge  { font-size: 2.2em; }
.rw-body s   { text-decoration: line-through; }
.rw-body sub, .rw-body sup { font-size: .75em; }
.rw-body code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .9em;
    background: rgba(255,255,255,.06);
    padding: .1em .4em;
    border-radius: 5px;
}
.rw-body pre.ql-syntax {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .92em;
    background: #0d1017;
    color: #e6e6e6;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow-x: auto;
    white-space: pre;
    margin: 1.3rem 0;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.rw-footer { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.rw-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--t2);
    text-decoration: none;
    font-weight: 600;
}
.rw-back:hover { color: var(--gold); }

/* ── Responsiv ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .rw-layout { grid-template-columns: 1fr; gap: 20px; }
    .rw-toc {
        position: static;
        max-height: none;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 4px;
    }
    .rw-toc-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        padding: 12px 16px;
        background: none;
        border: none;
        color: var(--t0);
        font-family: var(--font-head);
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
    }
    .rw-toc-nav { display: none; padding: 4px 16px 14px; border-left: none; }
    .rw-toc.open .rw-toc-nav { display: flex; }
    .rw-toc-title { display: none; }
    .rw-toc-nav a { border-left: none; padding-left: 0; }
    .rw-toc-l3 { padding-left: 16px !important; }
    .rw-body .ql-indent-1 { padding-left: 1.5em; }
    .rw-body .ql-indent-2 { padding-left: 3em; }
    .rw-body .ql-indent-3 { padding-left: 4.5em; }
    .rw-body .ql-indent-4 { padding-left: 6em; }
    .rw-body [class*="ql-indent-"] { padding-left: 3em; }
}
/* ── Editor-Formater (Quill-Klassen) op der ëffentlecher Säit ──────── */
.rw-body .ql-align-center  { text-align: center; }
.rw-body .ql-align-right   { text-align: right; }
.rw-body .ql-align-justify { text-align: justify; }
.rw-body .ql-indent-1 { padding-left: 3em; }
.rw-body .ql-indent-2 { padding-left: 6em; }
.rw-body .ql-indent-3 { padding-left: 9em; }
.rw-body .ql-indent-4 { padding-left: 12em; }
.rw-body .ql-indent-5 { padding-left: 15em; }
.rw-body .ql-indent-6 { padding-left: 18em; }
.rw-body .ql-indent-7 { padding-left: 21em; }
.rw-body .ql-indent-8 { padding-left: 24em; }
.rw-body .ql-size-small { font-size: .82em; }
.rw-body .ql-size-large { font-size: 1.5em; }
.rw-body .ql-size-huge  { font-size: 2.2em; }
.rw-body s   { text-decoration: line-through; }
.rw-body sub, .rw-body sup { font-size: .75em; }
.rw-body code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .9em;
    background: rgba(255,255,255,.06);
    padding: .1em .4em;
    border-radius: 5px;
}
.rw-body pre.ql-syntax {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .92em;
    background: #0d1017;
    color: #e6e6e6;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow-x: auto;
    white-space: pre;
    margin: 1.3rem 0;
}
/* Op Handy den Androck manner staark */
@media (max-width: 900px) {
    .rw-body [class*="ql-indent-"] { padding-left: 2em !important; }
}
/* ── Tabellen (aus dem Editor, quill-better-table) ────────────────── */
.rw-body .quill-better-table-wrapper { overflow-x: auto; margin: 1.4rem 0; }
.rw-body table.quill-better-table,
.rw-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: .98rem;
}
.rw-body table.quill-better-table td,
.rw-body table.quill-better-table th,
.rw-body table td,
.rw-body table th {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    color: var(--t1);
}
.rw-body table th { background: rgba(255,255,255,.04); color: var(--t0); font-weight: 600; }
.rw-body table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.rw-body table .qlbt-cell-line { margin: 0; padding: 0; }