/* Nocturne – gemeinsame Grundlage für Startseite und Regelwerk */
@import url(/fonts/fonts.css);

:root {
    --bg: #0a0c0d;
    --bg-2: #0f1213;
    --panel: #131617;
    --tile: #181c1d;
    --line: #2a2e30;
    --line-strong: #3b4042;
    --muted: #8d9192;
    --soft: #b4b7b8;
    --text: #e9eaeb;
    --white: #f6f6f7;
    --accent: #c9ced6;
    --accent-mid: #6f7680;
    --accent-deep: #3a3f46;
    --accent-glow: rgba(201, 206, 214, .28);
    --ok: #6fcf97;
    --warn: #e6b450;
    --bad: #e5695c;
    --add-bg: rgba(111, 207, 151, .14);
    --add-fg: #9fe3bb;
    --del-bg: rgba(229, 105, 92, .14);
    --del-fg: #f1a097;
    --display: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
    --body: 'Inter', system-ui, Arial, sans-serif;
    --radius: 10px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 16px/1.6 var(--body);
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 44px; padding: .6rem 1.15rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--tile); color: var(--white);
    font: 600 1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--accent); color: var(--white); box-shadow: 0 0 1.2rem var(--accent-glow); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; border-color: var(--line-strong); }
.btn.primary { background: linear-gradient(180deg, #e9ecf0, #aab1ba); color: #0b0d0e; border-color: #d7dbe0; }
.btn.primary:hover { background: linear-gradient(180deg, #ffffff, #c3c9d0); color: #0b0d0e; }
.btn.small { min-height: 34px; padding: .35rem .75rem; font-size: .9rem; }
.btn.danger:hover { border-color: var(--bad); box-shadow: 0 0 1rem rgba(229, 105, 92, .25); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.eyebrow { font: 600 .8rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── Eigene Bedienelemente (statt Browser-Standard) ────────────────────
   Farben pro Seite über --nx-* anpassbar (z. B. Copnet blau). */
:root {
    --nx-panel: var(--panel);
    --nx-field: var(--tile);
    --nx-line: var(--line-strong);
    --nx-check: var(--accent);
    --nx-check-ink: #0b0d0e;
    --nx-glow: var(--accent-glow);
    --nx-thumb: #3a3f42;
    --nx-thumb-hover: #565c60;
    --nx-track: transparent;
}
::selection { background: var(--nx-glow); color: var(--white); }

/* Scrollleisten – Chromium/FiveM-Browser */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nx-track); }
::-webkit-scrollbar-thumb { background: var(--nx-thumb); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background: var(--nx-thumb-hover); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; }
/* Firefox */
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: var(--nx-thumb) var(--nx-track); } }

/* Checkboxen & Radios */
input[type=checkbox], input[type=radio] {
    -webkit-appearance: none; appearance: none;
    display: inline-grid; place-content: center; flex: none;
    width: 1.15rem; height: 1.15rem; margin: 0; vertical-align: -.2em;
    border: 1.5px solid var(--nx-line); border-radius: 5px; background: var(--nx-field);
    cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before {
    content: ''; width: .32rem; height: .62rem; margin-top: -.12rem;
    border: solid var(--nx-check-ink); border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform .12s;
}
input[type=radio]::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--nx-check-ink); transform: scale(0); transition: transform .12s; }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--nx-check); border-color: var(--nx-check); }
input[type=checkbox]:checked::before { transform: rotate(45deg) scale(1); }
input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:indeterminate { background: var(--nx-check); border-color: var(--nx-check); }
input[type=checkbox]:indeterminate::before { width: .55rem; height: 0; margin: 0; border-width: 0 0 2px; transform: none; }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--nx-check); box-shadow: 0 0 0 3px var(--nx-glow); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--nx-check); outline-offset: 2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }

/* Auswahllisten (Pfeil im Seiten-Design) */
select {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    padding-right: 2.2rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238d9192' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right .8rem center !important;
    background-size: .75rem .5rem !important;
    background-repeat: no-repeat !important;
}
select option { background: var(--nx-panel); color: var(--text); }

/* Eigene Dropdowns (shared/ui.js ersetzt jedes <select>) */
select.nx-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip: rect(0 0 0 0); }
button.nx-select {
    position: relative; display: inline-flex; align-items: center; min-width: 0; min-height: 38px;
    padding: 0 2.3rem 0 .8rem !important; text-align: left; cursor: pointer;
    font: inherit; color: var(--text); background-color: var(--nx-field);
    border: 1px solid var(--nx-line); border-radius: 9px; transition: border-color .12s, box-shadow .12s;
}
button.nx-select::after {
    content: ''; position: absolute; right: .95rem; top: 50%; width: .42rem; height: .42rem; margin-top: -.32rem;
    border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s, margin .15s, border-color .12s;
}
button.nx-select.open::after { transform: rotate(-135deg); margin-top: -.08rem; border-color: var(--nx-check); }
button.nx-select:hover:not(:disabled), button.nx-select.open { border-color: var(--nx-check); }
button.nx-select.open, button.nx-select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-glow); }
button.nx-select:disabled { opacity: .5; cursor: not-allowed; }
.nx-select-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.nx-select[data-tone=good] { color: #9fe3bb; }
button.nx-select[data-tone=bad] { color: #f1a097; }
button.nx-select[data-tone=warn] { color: #f0cd84; }
.nx-menu {
    position: fixed; z-index: 1200; margin: 0; padding: 4px; list-style: none; overflow-y: auto; max-width: calc(100vw - 16px);
    background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 10px;
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .55); animation: nx-menu .12s ease-out; font-size: .95rem;
}
.nx-menu.up { animation-name: nx-menu-up; }
.nx-opt { position: relative; padding: .5rem 2rem .5rem .7rem; border-radius: 7px; color: var(--soft); cursor: pointer; white-space: nowrap; user-select: none; }
.nx-opt.active { background: var(--nx-glow); color: var(--white); }
.nx-opt[aria-selected=true] { color: var(--white); font-weight: 600; }
.nx-opt[aria-selected=true]::after { content: ''; position: absolute; right: .8rem; top: 50%; width: .3rem; height: .6rem; margin-top: -.38rem;
    border: solid var(--nx-check); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nx-opt[data-tone=good] { color: #9fe3bb; }
.nx-opt[data-tone=bad] { color: #f1a097; }
.nx-opt[data-tone=warn] { color: #f0cd84; }
.nx-opt[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
@keyframes nx-menu { from { opacity: 0; transform: translateY(-4px); } }
@keyframes nx-menu-up { from { opacity: 0; transform: translateY(4px); } }

/* Bestätigungs-/Eingabefenster (shared/ui.js) */
dialog.nx-bg { position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
    display: grid; place-items: center; padding: 16px; color: var(--text);
    background: rgba(3, 5, 7, .72); backdrop-filter: blur(4px); opacity: 0; transition: opacity .15s; }
dialog.nx-bg:not([open]) { display: none; }
dialog.nx-bg::backdrop { background: transparent; }
.nx-bg.in { opacity: 1; }
.nx-dialog { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto;
    background: var(--nx-panel); border: 1px solid var(--nx-line); border-radius: 14px;
    box-shadow: 0 2rem 4rem rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .02) inset;
    transform: translateY(8px) scale(.98); transition: transform .15s; }
.nx-bg.in .nx-dialog { transform: none; }
.nx-dialog form { margin: 0; padding: 1.3rem 1.3rem 1.1rem; }
.nx-title { margin: 0 0 .55rem; font: 700 1.25rem/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--white); }
.nx-dialog.danger .nx-title { color: #f3a59c; }
.nx-msg { margin: 0; color: var(--soft); white-space: pre-line; overflow-wrap: anywhere; }
.nx-input { width: 100%; margin-top: .9rem; height: 44px; padding: 0 .8rem; border-radius: 9px; border: 1px solid var(--nx-line);
    background: var(--nx-field); color: var(--text); font: inherit; }
.nx-input:focus { outline: none; border-color: var(--nx-check); box-shadow: 0 0 0 3px var(--nx-glow); }
.nx-input[aria-invalid=true] { border-color: var(--bad); }
.nx-err { min-height: 1.2rem; margin-top: .35rem; color: #f1a097; font-size: .88rem; }
.nx-err:empty { min-height: 0; margin: 0; }
.nx-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.btn.nx-danger { background: rgba(229, 105, 92, .16); border-color: rgba(229, 105, 92, .55); color: #ffd5cf; }
.btn.nx-danger:hover { background: rgba(229, 105, 92, .26); border-color: var(--bad); box-shadow: 0 0 1rem rgba(229, 105, 92, .3); color: #fff; }

/* Hinweis bei Formularprüfung */
.nx-tip { position: fixed; z-index: 1100; max-width: min(320px, calc(100vw - 16px)); padding: .45rem .7rem;
    background: var(--nx-panel); color: var(--white); font-size: .88rem; line-height: 1.35;
    border: 1px solid var(--bad); border-radius: 8px; box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .5); pointer-events: none;
    animation: nx-tip .15s ease-out; }
.nx-tip::before { content: '!'; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-right: .45rem;
    border-radius: 50%; background: var(--bad); color: #fff; font-weight: 800; font-size: .72rem; vertical-align: .05em; }
[aria-invalid=true] { border-color: var(--bad) !important; }
@keyframes nx-tip { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nx-menu { animation: none; } .nx-bg, .nx-dialog, input[type=checkbox]::before, input[type=radio]::before { transition: none; } .nx-tip { animation: none; } }