/* NextCity minimal monochrome (narcocity-inspired, not a clone) */
:root{
  --bg:#0b0b0b; --text:#f5f5f5; --muted:#9a9a9a; --border:#1e1e1e; --primary:#fff;
}
:root.light{ --bg:#fafafa; --text:#0f0f0f; --muted:#616161; --border:#e5e5e5; --primary:#000; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-size:16px}
.title{margin:0;font-size:15px;font-weight:700}
.actions{display:flex;align-items:center;gap:8px}
.search{width:min(42vw,420px);padding:8px 10px;border:1px solid var(--border);border-radius:9999px;background:transparent;color:var(--text)}
.btn{border:1px solid var(--border);background:transparent;color:var(--text);padding:8px 12px;border-radius:9999px;cursor:pointer}
.btn:hover{border-color:var(--text)}

/* Layout */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 54px)}
.sidebar{position:sticky;top:54px;height:calc(100vh - 54px);padding:12px;border-right:1px solid var(--border);overflow:auto}
.content{padding:20px min(6vw,48px);max-width:1024px}
.footer{padding:16px;border-top:1px solid var(--border);text-align:center;color:var(--muted)}

/* TOC minimal */
.toc{display:grid;gap:4px}
.toc .group-title{margin:8px 6px 4px;font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.toc a{display:block;padding:7px 10px;border-radius:9999px;border:1px solid transparent;color:var(--text);font-size:13px;text-decoration:none}
.toc a:hover{background:#151515;border-color:var(--border)}
.toc a.active{background:#181818;border-color:#222}

/* Sections */
section{margin:18px 0 28px}
section h2{margin:0 0 10px;font-size:20px;border-bottom:1px solid var(--border);padding-bottom:6px}

/* Hero */
#hero{margin:6px 0 10px}
.hero-title{margin:0 0 6px;font-size:28px;letter-spacing:.2px}
.hero-sub{margin:0 0 10px;color:var(--muted);max-width:70ch}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary{background:#fff;color:#000;border-color:#fff}
:root.light .btn-primary{background:#000;color:#fff;border-color:#000}

/* Kategorien (compact) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.card{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);text-decoration:none}
.card:hover{background:#121212}
.card-ic{font-size:18px;width:24px;text-align:center}
.card-body h3{margin:0 0 2px;font-size:14px}
.card-body p{margin:0;color:var(--muted);font-size:12px}

/* Rules */
.rules{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rule-item{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:transparent}
.rule-code{display:inline-block;min-width:30px;text-align:center;font-weight:700;margin-right:8px;color:var(--text)}

/* Table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px}
.table th{text-align:left;background:#111}

/* Details */
details{border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:transparent}
summary{cursor:pointer;font-weight:600}

/* Overlay + mobile sidebar */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}
.overlay[hidden]{display:none}
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;top:54px;left:0;bottom:0;width:min(84vw,340px);transform:translateX(-100%);background:var(--bg);z-index:20}
  .sidebar.open{transform:translateX(0)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.cards{grid-template-columns:1fr}}