:root {
    --navy: #0f2040;
    --navy-mid: #1a3560;
    --navy-deep: #09162d;
    --navy-soft: #29466f;
    --gold: #c8a84b;
    --gold-light: #e8cc7a;
    --cream: #f5f1e8;
    --cream-deep: #ebe4d6;
    --white: #ffffff;
    --text: #1a1a1a;
    --text-muted: #5a5a5a;
    --border: #ddd8cc;
    --danger-bg: #fff5f5;
    --danger: #b91c1c;
    --sidebar-w: 280px;
  }

  /* Scrollbars in Wetboek-huisstijl */
  * {
    scrollbar-color: var(--gold) rgba(9,22,45,0.28);
    scrollbar-width: thin;
  }

  *::-webkit-scrollbar { height: 11px; width: 11px; }
  *::-webkit-scrollbar-track { background: rgba(9,22,45,0.12); }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover { background: var(--gold-light); background-clip: padding-box; }
  *::-webkit-scrollbar-corner { background: var(--cream); }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Georgia', serif;
    background:
      linear-gradient(90deg, rgba(15,32,64,0.055) 1px, transparent 1px),
      linear-gradient(180deg, rgba(15,32,64,0.035) 1px, transparent 1px),
      var(--cream);
    background-size: 32px 32px;
    color: var(--text);
    display: flex;
    min-height: 100vh;
  }

  /* ── SIDEBAR ── */
  #sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy), var(--navy-deep));
    box-shadow: 12px 0 28px rgba(15,32,64,0.16);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
  }

  #sidebar-header {
    padding: 28px 20px 20px;
    border-bottom: 1px solid rgba(200,168,75,0.3);
  }

  #sidebar-header .emblem {
    font-size: 28px;
    text-align: center;
    margin-bottom: 10px;
  }

  #sidebar-header h1 {
    color: var(--gold);
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
  }

  #sidebar nav { padding: 16px 0 40px; }

  .nav-section {
    padding: 14px 20px 6px;
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(200,168,75,0.6);
  }

  .nav-link {
    display: block;
    padding: 8px 20px 8px 24px;
    font-family: 'Arial', sans-serif;
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    line-height: 1.4;
  }

  .nav-link:hover, .nav-link.active {
    color: var(--gold-light);
    background: rgba(200,168,75,0.08);
    border-left-color: var(--gold);
  }

  .search-box {
    padding: 10px 16px 6px;
  }

  .search-box input {
    width: 100%;
    border: 1px solid rgba(200,168,75,0.35);
    background: rgba(255,255,255,0.08);
    color: var(--white);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    outline: none;
  }

  .search-box input::placeholder {
    color: rgba(255,255,255,0.45);
  }

  .search-box input:focus {
    border-color: var(--gold);
    background: rgba(255,255,255,0.12);
  }

  .search-status {
    min-height: 18px;
    margin-top: 6px;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
  }

  .search-results {
    display: none;
    margin-top: 8px;
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid rgba(200,168,75,0.22);
    padding-top: 6px;
  }

  .search-results.active {
    display: block;
  }

  .search-result {
    width: 100%;
    border: 0;
    border-left: 2px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.76);
    cursor: pointer;
    display: block;
    font-family: 'Arial', sans-serif;
    font-size: 11.5px;
    line-height: 1.35;
    margin: 0;
    padding: 7px 8px;
    text-align: left;
  }

  .search-result:hover,
  .search-result:focus {
    background: rgba(200,168,75,0.08);
    border-left-color: var(--gold);
    color: var(--gold-light);
    outline: none;
  }

  .search-result strong {
    color: var(--gold);
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    text-transform: uppercase;
  }

  /* ── MAIN ── */
  #main {
    margin-left: var(--sidebar-w);
    flex: 1;
    max-width: none;
    min-width: 0;
  }

  /* ── PAGE HEADER ── */
  #page-header {
    background:
      linear-gradient(135deg, rgba(200,168,75,0.12), transparent 34%),
      linear-gradient(180deg, var(--navy-mid), var(--navy));
    padding: 48px 56px 40px;
    border-bottom: 3px solid var(--gold);
  }

  #page-header .overline {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 14px;
  }

  #page-header h2 {
    color: #fff;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  #page-header p {
    color: rgba(255,255,255,0.55);
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    line-height: 1.6;
  }

  /* ── CONTENT AREA ── */
  .content-body {
    padding: 40px 56px 80px;
    max-width: 1120px;
  }

  /* ── SECTIONS / ARTICLES ── */
  .artikel {
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: 0 10px 24px rgba(15,32,64,0.07);
    margin-bottom: 24px;
    overflow: hidden;
  }

  .artikel-header {
    background: linear-gradient(90deg, var(--navy), var(--navy-mid));
    padding: 14px 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .artikel-num {
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
  }

  .artikel-title {
    color: #fff;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.3;
  }

  .artikel-body {
    padding: 20px 24px;
  }

  .artikel-body ol {
    padding-left: 20px;
    line-height: 1.8;
    font-size: 14.5px;
    color: var(--text);
  }

  .artikel-body ol li { margin-bottom: 6px; }

  .artikel-body ol ol {
    margin-top: 6px;
    list-style-type: lower-alpha;
  }

  .artikel-body ul {
    padding-left: 20px;
    line-height: 1.8;
    font-size: 14.5px;
    margin-bottom: 8px;
  }

  .artikel-body p {
    font-size: 14.5px;
    line-height: 1.8;
    margin-bottom: 10px;
  }

  /* ── STRAFFEN TABEL ── */
  .straf-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
  }

  .straf-table thead tr {
    background: var(--navy-mid);
  }

  .straf-table thead th {
    color: var(--gold-light);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 11px;
    text-transform: uppercase;
  }

  .straf-table tbody tr { border-bottom: 1px solid var(--border); }
  .straf-table tbody tr:last-child { border-bottom: none; }
  .straf-table tbody tr:nth-child(even) { background: var(--cream); }

  .straf-table td {
    padding: 9px 12px;
    vertical-align: middle;
  }

  .straf-table td:first-child {
    font-weight: 600;
    color: var(--text);
  }

  .straf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
  }

  .badge-cel { background: #f8eeee; color: #8b2929; border: 1px solid #dfb7b7; }
  .badge-taak { background: #edf2f8; color: #294e78; border: 1px solid #b9c9db; }
  .badge-boete { background: #f6f0df; color: #755b20; border: 1px solid #dccc9e; }
  .badge-rij { background: #edf4ee; color: #315f3e; border: 1px solid #b8cfbd; }

  /* ── CATEGORY HEADER ── */
  .cat-label {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(200,168,75,0.12);
    border: 1px solid rgba(200,168,75,0.3);
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 10px;
  }

  /* ── SNELHEID TABEL ── */
  .speed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
  }

  .speed-block h4 {
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--gold);
  }

  .speed-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-family: 'Arial', sans-serif;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border);
  }

  .speed-row:last-child { border-bottom: none; }
  .speed-row .km { color: var(--text-muted); }
  .speed-row .bedrag { font-weight: 600; color: #854d0e; }

  /* ── PAGE SECTIONS ── */
  .page-section { display: none; }
  .page-section.active { display: block; }

  .law-menu-toggle,.law-menu-backdrop { display:none; }

  body.searching .page-section {
    display: block;
  }

  body.searching #home-page,
  body.searching .page-section:not(.has-results) {
    display: none;
  }

  .artikel.search-hidden {
    display: none;
  }

  .artikel.search-focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200,168,75,0.22);
  }

  .search-empty {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    border-radius: 0 4px 4px 0;
    padding: 18px 22px;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ── INTRO / HOME ── */
  #home-page .content-body { padding-top: 48px; }

  .home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 32px;
  }

  .home-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: 0 8px 20px rgba(15,32,64,0.055);
    padding: 20px;
    text-decoration: none;
    cursor: pointer;
    display: block;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .home-card:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 24px rgba(15,32,64,0.11);
  }

  .home-card .card-icon {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .home-card h3 {
    font-size: 14px;
    color: var(--navy);
    margin-bottom: 6px;
  }

  .home-card p {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .intro-text {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold);
    padding: 20px 24px;
    border-radius: 0 4px 4px 0;
    font-size: 14.5px;
    line-height: 1.8;
    margin-bottom: 32px;
  }

  /* ── STRIKETHROUGH ── */
  del { color: var(--text-muted); text-decoration: line-through; }

  /* ── NOTE BOX ── */
  .note {
    background: #edf2f8;
    border: 1px solid #b9c9db;
    border-radius: 4px;
    padding: 12px 16px;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    color: #294e78;
    margin-top: 12px;
    line-height: 1.6;
  }

  .mt-16 { margin-top: 16px; }
  .mt-20 { margin-top: 20px; }

  @media (min-width: 1440px) {
    #page-header {
      padding: 56px 72px 46px;
    }

    .content-body {
      padding: 48px 72px 90px;
      max-width: 1280px;
    }
  }

  @media (min-width: 2200px) {
    :root {
      --sidebar-w: 320px;
    }

    #page-header h2 {
      font-size: 38px;
    }

    .artikel-body p,
    .artikel-body ol,
    .artikel-body ul {
      font-size: 15.5px;
    }

    .straf-table {
      font-size: 13.5px;
    }
  }

  @media (max-width: 1180px) {
    :root {
      --sidebar-w: 250px;
    }

    #main {
      max-width: none;
    }

    #page-header {
      padding: 40px 42px 34px;
    }

    .content-body {
      padding: 34px 42px 70px;
      max-width: none;
    }

    .nav-link {
      font-size: 12px;
      padding-left: 20px;
      padding-right: 16px;
    }
  }

  @media (max-height: 760px) and (min-width: 769px) {
    #sidebar-header {
      padding: 20px 16px 14px;
    }

    #sidebar nav {
      padding-bottom: 24px;
    }

    .nav-section {
      padding: 10px 16px 5px;
    }

    .nav-link {
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .search-results {
      max-height: 160px;
    }
  }

  @media (max-width: 768px) {
    body {
      display: block;
    }

    #sidebar {
      max-height: 380px;
      position: relative;
      width: 100%;
    }

    #main {
      margin-left: 0;
      max-width: none;
    }

    #page-header {
      padding: 32px 24px 28px;
    }

    #page-header h2 {
      font-size: 26px;
    }

    .content-body {
      padding: 28px 24px 58px;
      max-width: none;
    }

    .speed-grid {
      grid-template-columns: 1fr;
    }

    .artikel-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }

    .artikel-body {
      overflow-x: auto;
      padding: 18px 18px;
    }

    .straf-table {
      min-width: 520px;
    }

    .home-grid {
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
  }

  @media (max-width:768px) {
    body.law-menu-open { overflow:hidden; }
    #sidebar {
      bottom:0;
      height:100dvh;
      max-height:none;
      max-width:320px;
      position:fixed;
      top:0;
      transform:translateX(-105%);
      transition:transform .22s ease;
      width:86vw;
      z-index:120;
    }
    #sidebar.open { transform:translateX(0); }
    .law-menu-toggle {
      align-items:center;
      background:var(--navy);
      border:1px solid var(--gold);
      border-radius:6px;
      box-shadow:0 7px 20px rgba(15,32,64,.28);
      color:var(--gold-light);
      display:flex;
      font-family:Arial,sans-serif;
      font-size:20px;
      height:44px;
      justify-content:center;
      left:max(14px,env(safe-area-inset-left));
      position:fixed;
      top:max(14px,env(safe-area-inset-top));
      width:44px;
      z-index:130;
    }
    .law-menu-backdrop {
      background:rgba(7,16,32,.54);
      inset:0;
      opacity:0;
      pointer-events:none;
      position:fixed;
      transition:opacity .2s ease;
      z-index:115;
    }
    .law-menu-backdrop.visible { display:block; opacity:1; pointer-events:auto; }
    #page-header { padding-top:78px; }
  }

  @media (max-width: 520px) {
    #page-header,
    .content-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    #sidebar {
      max-height: none;
    }

    .home-grid {
      grid-template-columns: 1fr;
    }

    .artikel-body ol,
    .artikel-body ul {
      padding-left: 18px;
    }
  }

  /* Waarschuwing boven alle onderdelen van het Wetboek. */
  .law-warning { display:flex; align-items:flex-start; gap:14px; padding:22px 32px; background:#fff1d6; color:#624014; border-bottom:2px solid #d79937; font-family:Arial,Helvetica,sans-serif; }
  .law-warning-icon { display:grid; place-items:center; flex:0 0 27px; height:27px; border:1px solid #a36b1c; border-radius:50%; font-size:18px; font-weight:700; }
  .law-warning strong { display:block; font-size:14px; line-height:1.5; }
  .law-warning p { margin:5px 0 0; max-width:850px; font-size:13px; line-height:1.7; }
  @media (max-width:768px) {
    .law-warning { padding:76px 20px 20px; gap:12px; }
    .law-warning ~ .page-section #page-header { padding-top:32px; }
  }

  /* Responsive text flow */
  html,body { max-width:100%; overflow-x:hidden; }
  #main,#page-header,.content-body,.artikel,.artikel-header,.artikel-title,.artikel-body,.home-card,.speed-block { min-width:0; }
  h1,h2,h3,h4,p,li,a,button,span,strong,em,td,th { overflow-wrap:anywhere; }
  .artikel-num { flex:0 0 auto; }
  .artikel-title { flex:1 1 auto; }
  .artikel-body { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
  .artikel-body img,.artikel-body video,.artikel-body iframe { height:auto; max-width:100%; }
  .speed-row { align-items:flex-start; gap:12px; }
  .speed-row .bedrag { flex:0 0 auto; text-align:right; }

  @media (max-width:768px) {#page-header h2{font-size:clamp(25px,7vw,32px)}.artikel-header{align-items:flex-start}.home-card{height:auto}}
  @media (max-width:520px) {#page-header h2{font-size:clamp(23px,8vw,28px)}.artikel-body p,.artikel-body ol,.artikel-body ul{font-size:14px}.artikel-header{padding-left:16px;padding-right:16px}}
  @media (max-width:380px) {#page-header,.content-body{padding-left:12px;padding-right:12px}.artikel-body{padding-left:15px;padding-right:15px}}

  /* Mobile support */
  @media (max-width:768px) {
    html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
    #sidebar { max-height:none; overscroll-behavior:contain; }
    #law-search { font-size:16px; }
    .nav-link,.search-result,.home-card { min-height:44px; }
    .artikel-body { -webkit-overflow-scrolling:touch; }
  }
  @media (hover:none) and (pointer:coarse) {
    a,button,input { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
    .home-card:hover { box-shadow:0 8px 20px rgba(15,32,64,.055); transform:none; }
  }