/* Opmaak van de wolven-, zwijnen- en overig-pagina (gedeeld). */
  :root{
    color-scheme: light;
    --bg:#f5f5f3;
    --surface:#ffffff;
    --map-surface:#f7f7f5;
    --ink:#131313;
    --ink-2:#454545;
    --muted:#87887f;
    --border:rgba(17,17,17,.13);
    --border-strong:rgba(17,17,17,.24);
    --accent:#141414;
    --accent-ink:#f5f5f3;
    --grid:#e4e4e1;
    --land:#ececea;
    --tab-bg:#e7e7e4;
    --s-zicht:#2a78d6;
    --s-aanval:#eb6834;
    --s-overig:#1baf7a;
    --pal-1:#2a78d6;
    --pal-2:#eb6834;
    --pal-3:#1baf7a;
    --pal-4:#eda100;
    --pal-5:#e87ba4;
    --pal-6:#008300;
    --pal-7:#4a3aa7;
    --shadow: 0 1px 2px rgba(21,32,24,.06), 0 8px 24px -12px rgba(21,32,24,.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg:#121212;
      --surface:#1c1c1c;
      --map-surface:#161616;
      --ink:#f2f2f0;
      --ink-2:#bdbdbd;
      --muted:#8a8a86;
      --border:rgba(255,255,255,.13);
      --border-strong:rgba(255,255,255,.24);
      --accent:#e8e8e8;
      --accent-ink:#121212;
      --grid:#2a2a2a;
      --land:#242424;
      --tab-bg:#232323;
      --s-zicht:#3987e5;
      --s-aanval:#d95926;
      --s-overig:#199e70;
      --pal-1:#3987e5;
      --pal-2:#d95926;
      --pal-3:#199e70;
      --pal-4:#c98500;
      --pal-5:#d55181;
      --pal-6:#008300;
      --pal-7:#9085e9;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#121212;
    --surface:#1c1c1c;
    --map-surface:#161616;
    --ink:#f2f2f0;
    --ink-2:#bdbdbd;
    --muted:#8a8a86;
    --border:rgba(255,255,255,.13);
    --border-strong:rgba(255,255,255,.24);
    --accent:#e8e8e8;
    --accent-ink:#121212;
    --grid:#2a2a2a;
    --land:#242424;
    --tab-bg:#232323;
    --s-zicht:#3987e5;
    --s-aanval:#d95926;
    --s-overig:#199e70;
    --pal-1:#3987e5;
    --pal-2:#d95926;
    --pal-3:#199e70;
    --pal-4:#c98500;
    --pal-5:#d55181;
    --pal-6:#008300;
    --pal-7:#9085e9;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:Arial, Helvetica, sans-serif;
  }
  .page{
    max-width:980px;
    margin:0 auto;
    padding-inline:20px;
    padding-block: 28px 40px;
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .navbar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:-6px;
  }
  .nav-links{
    flex:1;
    display:flex;
    justify-content:center;
    gap:4px;
    flex-wrap:wrap;
  }
  .nav-link{
    appearance:none;
    border:none;
    background:transparent;
    font:inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:600;
    font-size:13.5px;
    color:var(--ink-2);
    padding:8px 14px;
    border-radius:9px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    text-decoration:none;
  }
  .nav-link.active{ background:var(--tab-bg); color:var(--ink); }
  .nav-link:not(.is-soon):not(.active):hover{ background:var(--tab-bg); }
  .nav-link.is-soon{ color:var(--muted); cursor:default; opacity:.75; }
  .nav-link .soon-tag{
    font-family:Arial, Helvetica, sans-serif;
    font-size:9px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:var(--grid);
    color:var(--muted);
    padding:2px 6px;
    border-radius:99px;
  }
  .theme-toggle{
    appearance:none;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    width:36px;
    height:36px;
    border-radius:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex:none;
  }
  .theme-toggle:hover{ background:var(--tab-bg); }
  .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .theme-toggle .icon-moon{ display:none; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:inline; }
    :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; }
  }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ display:inline; }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
  @media (max-width:520px){
    .nav-link{ padding:7px 9px; font-size:12.5px; }
    .nav-link .soon-tag{ display:none; }
    .nav-links{
      flex-wrap:nowrap;
      justify-content:flex-start;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      min-width:0;
    }
    .nav-links::-webkit-scrollbar{ display:none; }
  }

  .hero{ display:flex; flex-direction:column; gap:8px; }
  .eyebrow{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0;
  }
  h1{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:600;
    font-size:clamp(28px, 5vw, 42px);
    line-height:1.08;
    margin:0;
    text-wrap:balance;
    letter-spacing:-.01em;
  }
  .sub{
    margin:0;
    max-width:62ch;
    color:var(--ink-2);
    font-size:15px;
    line-height:1.55;
  }
  .sub b{ color:var(--ink); font-weight:600; }

  .tabs{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    background:var(--tab-bg);
    border:1px solid var(--border);
    border-radius:12px;
    padding:4px;
    width:fit-content;
    max-width:100%;
  }
  .tab{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--ink-2);
    font:inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:600;
    font-size:13.5px;
    padding:9px 16px;
    border-radius:9px;
    cursor:pointer;
    white-space:nowrap;
  }
  .tab.active{
    background:var(--surface);
    color:var(--ink);
    box-shadow:var(--shadow);
  }
  .tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
  }
  .stat{
    background:var(--surface);
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .stat .n{
    font-family:Arial, Helvetica, sans-serif;
    font-size:22px;
    font-weight:500;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
  }
  .stat .l{
    font-size:11.5px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .stat.k-aanval .n{ color:var(--s-aanval); }
  .stat.k-zicht .n{ color:var(--s-zicht); }
  .stat.k-jonkies .n{ color:var(--pal-4); }

  .map-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:14px 14px 8px;
  }
  .map-search{ position:relative; margin-bottom:10px; }
  .search-input{
    width:100%;
    font:inherit;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--map-surface);
    color:var(--ink);
  }
  .search-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .search-input::placeholder{ color:var(--muted); }
  .search-results{
    position:absolute;
    top:calc(100% + 4px);
    left:0; right:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    max-height:280px;
    overflow-y:auto;
    z-index:6;
  }
  .search-item{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:9px 14px;
    cursor:pointer;
    border-bottom:1px solid var(--border);
  }
  .search-item:last-child{ border-bottom:none; }
  .search-item:hover, .search-item.active{ background:var(--tab-bg); }
  .search-item .si-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .search-item .si-meta{ font-size:11.5px; color:var(--muted); }
  .search-item .si-meta.has-attack{ color:var(--s-aanval); }
  .search-empty{ padding:11px 14px; font-size:12.5px; color:var(--muted); }
  .map-wrap{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    background:var(--map-surface);
    border:1px solid var(--border);
  }
  .zoom-controls{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:6;
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:9px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .zoom-controls button{
    appearance:none;
    border:none;
    background:var(--surface);
    color:var(--ink);
    width:30px;
    height:30px;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Arial, Helvetica, sans-serif;
  }
  .zoom-controls button:hover{ background:var(--tab-bg); }
  .zoom-controls button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

  .map-wrap{ height:520px; }
  @media (max-width:640px){ .map-wrap{ height:400px; } }
  #map{ width:100%; height:100%; background:var(--map-surface); }
  .leaflet-container{ position:relative; z-index:0; font-family:Arial, Helvetica, sans-serif; background:var(--map-surface); }
  .leaflet-control-attribution{ font-size:10px; background:rgba(255,255,255,.75); }
  .leaflet-control-zoom{ display:none; }
  .leaflet-popup-content-wrapper{
    background:var(--ink);
    color:var(--bg);
    border-radius:10px;
    box-shadow:0 10px 30px -8px rgba(0,0,0,.45);
  }
  .leaflet-popup-content{ margin:10px 12px; font-size:12.5px; line-height:1.45; }
  .leaflet-popup-tip{ background:var(--ink); }
  .leaflet-popup-close-button{ color:var(--bg) !important; opacity:.7; }
  .leaflet-popup-close-button:hover{ opacity:1; }
  .pulse-halo{
    animation: pulse-breathe 1.8s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
  }
  @keyframes pulse-breathe{
    0%   { transform: scale(1);   opacity: .65; }
    70%  { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .tt-name{ font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:13.5px; margin-bottom:3px; }
  .exact-badge{ color:var(--muted); font-weight:700; margin-left:4px; font-size:.85em; }
  .tt-row{ display:flex; justify-content:space-between; gap:10px; font-family:Arial, Helvetica, sans-serif; font-size:11px; opacity:.92; }
  .tt-dates{ margin-top:6px; padding-top:6px; border-top:1px solid rgba(255,255,255,.18); font-family:Arial, Helvetica, sans-serif; font-size:10.5px; opacity:.85; }
  .tt-dates div.date-row{ white-space:nowrap; }

  .map-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:10px 4px 6px;
  }

  .legend{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
    font-size:12.5px;
    color:var(--ink-2);
  }
  .legend-group{ display:flex; align-items:center; gap:8px; }
  .swatch{ width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }

  /* meldingen per maand (WDK.renderMonthlyChart, zelfde opmaak als assets/home.css) */
  .chart-wrap{ width:100%; height:200px; }
  .chart-wrap svg{ width:100%; height:100%; display:block; overflow:visible; }
  .chart-wrap text{ fill:var(--ink-2); font-family:Arial, Helvetica, sans-serif; }
  .chart-wrap .chart-bar{ transition:opacity .15s; }
  .chart-wrap .chart-bar:hover{ opacity:.8; }

  .animal-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .card-title{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:600;
    font-size:19px;
    margin:0;
    letter-spacing:-.005em;
  }
  .bar-chart{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:2px;
  }
  .bar-row{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:4px 6px;
    margin:0 -6px;
    border-radius:8px;
    transition: background .12s ease;
  }
  .bar-row:hover{ background:var(--tab-bg); }
  .bar-top{
    display:grid;
    grid-template-columns:118px 1fr 34px;
    align-items:center;
    gap:10px;
  }
  .bar-label{
    font-size:13px;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition: color .12s ease;
  }
  .bar-row.is-unknown .bar-label{ color:var(--muted); }
  .bar-track{
    position:relative;
    height:15px;
    background:var(--grid);
    border-radius:4px;
    overflow:hidden;
    transition: box-shadow .12s ease;
  }
  .bar-row:hover .bar-track{ box-shadow:inset 0 0 0 1px var(--border-strong); }
  .bar-fill{
    position:absolute;
    inset:0 auto 0 0;
    min-width:5px;
    border-radius:4px;
    background:var(--bar-color, var(--muted));
    transition: filter .12s ease;
  }
  .bar-row:hover .bar-fill{ filter:brightness(1.15) saturate(1.1); }
  .bar-row.is-unknown .bar-fill{ background:var(--muted); opacity:.5; }
  .bar-row.is-unknown:hover .bar-fill{ filter:none; opacity:.7; }
  .bar-row:hover .bar-value{ color:var(--ink); font-weight:600; }
  .bar-value{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12.5px;
    transition: color .12s ease, font-weight .12s ease;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    text-align:right;
  }
  .card-foot{
    font-size:11.5px;
    color:var(--muted);
    line-height:1.6;
    border-top:1px solid var(--border);
    padding-top:12px;
    margin-top:2px;
  }
  .notice{
    font-size:12.5px;
    color:var(--ink-2);
    line-height:1.55;
    background:var(--map-surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
  }
  .sub-h{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:600;
    font-size:13.5px;
    color:var(--ink);
    margin:2px 0 0;
  }
  .week-strip{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
    gap:8px;
  }
  .week-card{
    background:var(--map-surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
  }
  .week-range{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10.5px;
    color:var(--ink-2);
    line-height:1.3;
  }
  .week-badge{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--muted); }
  .week-badge .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
  .lvl-rustig .dot{ background:var(--muted); }
  .lvl-gemiddeld .dot{ background:var(--pal-4); }
  .lvl-verhoogd .dot{ background:var(--s-aanval); }
  .lvl-verhoogd.week-badge{ color:var(--s-aanval); }
  .lvl-gemiddeld.week-badge{ color:var(--ink-2); }
  .level-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:11.5px; color:var(--muted); }
  .level-legend .week-badge{ font-size:11.5px; }
  .hotspot-list{ display:flex; flex-wrap:wrap; gap:8px; }
  .hotspot-chip{
    display:flex;
    align-items:center;
    gap:7px;
    background:var(--map-surface);
    border:1px solid var(--border);
    border-radius:99px;
    padding:6px 13px 6px 10px;
    font-size:12.5px;
    color:var(--ink);
  }
  .hotspot-chip .hc-n{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:600;
    color:var(--s-aanval);
    background:var(--surface);
    border-radius:99px;
    padding:1px 7px;
  }
  .fun-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
  }
  .fun-tile{ background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
  .fun-tile .n{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:600;
    color:var(--ink);
  }
  .fun-tile .l{ font-size:11.5px; color:var(--muted); line-height:1.45; }
  @media (min-width:641px){
    .fun-grid{ grid-template-columns:repeat(4,1fr); }
  }
  @media (max-width:640px){
    .bar-top{ grid-template-columns:92px 1fr 30px; gap:7px; }
    .bar-label{ font-size:11.5px; }
    .zoom-controls button{ width:38px; height:38px; font-size:18px; }
    .search-item{ padding:11px 14px; }
    .week-strip{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:360px){
    .week-strip{ grid-template-columns:repeat(2, 1fr); }
  }

  footer{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    line-height:1.6;
    border-top:1px solid var(--border);
    padding-top:16px;
  }
  footer a{ color:var(--ink-2); }

  @media (max-width:640px){
    .stats{ grid-template-columns:repeat(2,1fr); }
    h1{ font-size:26px; }
  }

  #backToTop{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:50;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--pal-7);
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  #backToTop.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
  #backToTop:hover{ filter:brightness(1.08); }
  #backToTop:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }