:root{
  --accent: #2eaaff;
  --accent2: #222222;
  --info: #696969;
  --green:#00d27f;
  --brand-green:#00d27f;
  --rose:#d0d7de;
  --brand3:#2eaaff;
  --brand:#ff3d6e;

  --brand2:#F0006E;
  --hundred:#6bc9fc;

  --ink:#222222;
  --ink-colored:#ff3d6e;
  --scale-color:#5f5f6e;; /* #5f5f6e; */
  --bg:#f7f9fb;
  --gray-light:#d0d7de;
  --sep-height:3px;
  --wrap:1180px;
  --card-width:1100px;
  --card-icon-color:#ebf8ff;
  --card-icon-color2:#fff5f8;
  --muted:#6b7280;
  --mint:#f0f2f5;
  --other-parties-stripes:repeating-linear-gradient(45deg,#d1d5db,#d1d5db 2px,#e5e7eb 2px,#e5e7eb 4px);
  --bar-height:14px;
  --bar-height-small:10px;
  --index-card-color:#e9f5ff;
}

/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:12px/1.55 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
main{max-width:var(--wrap);margin:50px auto 40px;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ===== Header ===== */
.cpb-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.cpb-header .wrap{
  max-width:var(--card-width);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:16px;justify-content:space-between
}
.logo-icon{height:32px;width:auto;display:block}
.brand-text{font-size:1.1rem;font-weight:600;color:var(--brand-green);display:flex;align-items:baseline;gap:.4rem}
.brand-text .sep,.brand-text .tagline{color:var(--brand-green)}
.party-select{margin-left:auto;display:flex;align-items:center;gap:8px}
.party-label{font-size:1.1rem;font-weight:600;color:var(--brand);white-space:nowrap}
.party-select select{
  padding:6px 12px;font-size:1rem;border:1px solid var(--gray-light);
  border-radius:6px;background:#fff;color:var(--ink)
}
.cpb-sep{height:var(--sep-height);background:var(--brand-green)}

/* ===== Infographic Card (host) ===== */
.infographic-card{
  position:relative;max-width:var(--card-width);margin:0 auto 200px;background:#fff;
  border-radius:8px;border:1px solid var(--rose);border-bottom:2px solid var(--rose);border-right:2px solid var(--rose);
  box-shadow:0 4px 12px rgba(0,0,0,.05)
}
.infographic-card.macro-cijfers{background:var(--index-card-color)}
.card-footer{
  padding:20px 25px;font-size:.85em;color:var(--muted);
  background:#f3f4f6;border-top:1px solid #e5e7eb;border-bottom-left-radius:6px;border-bottom-right-radius:6px
}

/* ===== Text-card varianten ===== */
.infographic-card.text-card .card-section{
  padding-top:50px;font-size:1.05rem;line-height:1.7;color:var(--ink)
}
.text-card h4{font-size:1.15rem;font-weight:600;color:var(--ink);margin:28px 0 8px}
.text-card p{margin-bottom:16px}
.text-card ul{padding-left:24px;margin-bottom:20px}
.text-card li{margin-bottom:8px}
.text-card strong{color:var(--brand-green)}
.text-card .card-footer-link{margin-top:32px;border-top:1px solid #f0f2f5;padding-top:20px}
.text-card .card-footer-link a{font-weight:600;color:var(--brand);text-decoration:none;transition:color .2s}
.text-card .card-footer-link a:hover{color:var(--ink);text-decoration:underline}

/* ===== Badges ===== */
.card-badges{
  position:absolute;top:-19px;left:25px;right:25px;
  display:flex;justify-content:space-between;align-items:flex-start;z-index:5
}
.section-badge{
  background:var(--green);color:#fff;font-weight:700;font-size:1.4rem;padding:14px 28px;
  border-radius:0 12px 12px 0;line-height:1.2;box-shadow:0 4px 8px rgba(0,0,0,.1);margin-left:-27px
}
.section-info{
  background:var(--info)
}

.badge-group-right{display:flex;gap:4px}
.badge{display:flex;align-items:center;justify-content:center}
.party-name-badge{
  background:#fff;color:var(--ink);border:2px solid var(--green);border-radius:8px;
  padding:4px 12px;font-size:.9rem;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.party-logo-badge{
  background:#fff;border:2px solid var(--green);border-radius:8px;padding:4px;height:36px;width:36px;box-shadow:0 2px 4px rgba(0,0,0,.1)
}
.party-logo-badge img{max-width:100%;max-height:100%;display:block}

/* ===== Sections ===== */
.card-section{padding:25px;padding-top:50px;border-bottom:1px solid #f3f4f6}
.card-section:last-child{border-bottom:none}
.card-section h2{display:none}
.section-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.section-icon{height:28px;display:block;filter:grayscale(100%) brightness(20%);opacity:.85}
.section-text{font-size:1.25rem;font-weight:700;color:var(--ink)}
.indicators{display:flex;flex-direction:column;gap:24px;align-items:stretch}

/* ===== Intro card ===== */
.first-card{background:var(--green)!important;color:#fff;border:none;box-shadow:none;margin-bottom:40px}
.first-card .card-section{border-bottom:none}
.first-card .card-section h2{display:block;color:#fff;margin:0;font-size:1.4rem;font-weight:600;text-align:center}
.first-card .card-section p{color:#fff}
.intro-logo-title{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;margin-bottom:.75rem}
.intro-logo-inline{height:48px;width:auto;display:block}
.intro-brand p{margin:.25rem auto 0;font-size:.95rem;line-height:1.4;text-align:center;max-width:40rem}
@media (max-width:600px){
  .intro-logo-inline{height:36px}
  .first-card .card-section h2{font-size:1.2rem}
  .intro-brand p{font-size:.9rem;line-height:1.3}
}
@media (min-width:1200px){
  .intro-logo-inline{height:64px}
  .first-card .card-section h2{font-size:1.6rem}
}

/* ===== Indicator card (component) ===== */
.indicator-card{
  width:100%;background:#fff;border:1px solid #d0d7de;border-radius:12px;padding:20px;
  box-shadow:0 4px 15px rgba(0,0,0,.04);
  transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;
  margin-bottom:24px
}
.indicator-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.07)}
.card-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}
.card-icon{
  background:var(--card-icon-color);color:var(--green);border-radius:8px;
  width:48px;height:48px;display:flex;justify-content:center;align-items:center;flex-shrink:0
}
.card-icon svg{width:30px;height:30px;stroke:var(--accent)}
.card-title h2{display:inline;font-size:1.2rem;font-weight:600;margin:0;color:var(--accent)}
.card-title p{display:inline;margin:0;font-style:italic;font-size:.9em;color:var(--muted)}
.card-body .value{font-size:1.8em;font-weight:700;margin-bottom:15px}
.indicator-card .value.is-positive{color:var(--accent)}
.indicator-card .value.is-negative{color:var(--brand)}
.indicator-card .value.neutral{color:#374151}

/* ===== Symmetrische balk (links min, rechts plus) ===== */
.comparison-bar{
  position:relative;width:100%;height:var(--bar-height);
  background:var(--mint);border-radius:6px;margin-top:50px;margin-bottom:5px
}
.comparison-bar::before,.comparison-bar::after{
  content:"";position:absolute;top:-6px;bottom:-6px;width:2px;background:#d0d7de;opacity:.7
}
.comparison-bar::before{left:0}.comparison-bar::after{right:0}
.basispad-marker{position:absolute;top:-8px;bottom:-8px;border-left:3px dotted var(--brand);z-index:2}
.top-label-container{position:absolute;top:-25px;left:0;right:0;height:20px}
.label-value-top{position:absolute;font-size:.9em;font-weight:600;color:#343a40}
.label-value-top.abs-left{left:0}
.label-value-top.abs-right{right:0}
.direction-text-top{position:absolute;font-size:.8em;color:#555;white-space:nowrap}
.direction-text-top.abs-left-center{right:52%;text-align:right}
.direction-text-top.abs-right-center{left:52%}

/* resultaatbalk */
.vvd-result{position:absolute;height:100%;border-radius:6px;z-index:1}
.vvd-result.is-positive{background:var(--green)}
.vvd-result.is-negative{background:var(--brand)}
.vvd-result.neutral{background:transparent}

/* andere-partijen (optioneel) */
.other-parties-range{position:absolute;height:100%;background:var(--other-parties-stripes);opacity:.6;border-radius:6px}

/* ===== Legend (optioneel per sectie) ===== */
.dashboard-legend{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin:0 0 15px 0;padding-right:20px;box-sizing:border-box}
.legend-item{display:flex;align-items:center;gap:8px}
.legend-label{font-size:.8em;color:#6c757d}
.legend-bar{width:30px;height:12px;border-radius:3px;border:1px solid #d0d7de}
.vvd-bar{background:#00d27f}
.other-parties-bar{background:var(--other-parties-stripes)}
.legend-marker.baseline-marker{position:relative;width:30px;height:12px;border-radius:3px;border:1px solid #d0d7de;background:#e9fdfa}
.legend-marker.baseline-marker::after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:3px dotted var(--brand)}

/* ===== Policy chart (beleidspakket) ===== */
.policy-chart-card .card-body{padding-top:10px}
.policy-chart-card .chart-area{display:flex;flex-direction:column;gap:24px}
.policy-chart-card .chart-row{display:grid;grid-template-columns:3fr 5fr 1fr;gap:16px;align-items:center}
.policy-chart-card .chart-label{text-align:right;font-size:.9em;color:var(--ink);white-space:nowrap}
.policy-chart-card .bar-container{position:relative;width:100%;height:18px;background:#f0f2f5;border-radius:4px}
.policy-chart-card .bar-container .baseline{position:absolute;left:50%;top:-6px;bottom:-6px;border-left:2px dotted var(--brand);z-index:2}
.policy-chart-card .bar{position:absolute;top:0;height:100%;border-radius:4px;z-index:1;transition:width .3s ease-out}
.policy-chart-card .bar.is-positive{left:50%;background:var(--green)}
.policy-chart-card .bar.is-negative{right:50%;background:var(--brand)}
.policy-chart-card .chart-value{text-align:left;font-size:.9em;font-weight:600;white-space:nowrap}
.policy-chart-card .chart-value.is-positive{color:var(--green)}
.policy-chart-card .chart-value.is-negative{color:var(--brand)}
.policy-chart-card .top-label-container{position:absolute;top:-22px;left:0;right:0;height:20px}
.policy-chart-card .direction-text-top{position:absolute;font-size:.8em;color:#555;white-space:nowrap}
.policy-chart-card .direction-text-top.abs-left-center{right:52%;text-align:right}
.policy-chart-card .direction-text-top.abs-right-center{left:52%}
.policy-chart-card .basispad-label{position:absolute;left:50%;transform:translateX(-50%);font-size:.8em;font-style:italic;color:var(--muted);top:-22px}
@media (max-width:600px){
  .policy-chart-card .chart-row{grid-template-columns:2fr 3fr 1fr;gap:8px}
  .policy-chart-card .chart-label,.policy-chart-card .chart-value{font-size:.8em}
}

/* ===== Waterfall chart (generiek) ===== */
.waterfall-chart{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.chart-row{display:flex;align-items:center;gap:12px}
.chart-label{flex:0 0 180px;font-size:.9rem}
.bar-container{flex:1;background:#f1f5f9;border-radius:4px;position:relative}
.bar{
  height:24px;line-height:24px;font-size:.85rem;font-weight:600;color:#000;padding-right:6px;border-radius:4px
}
.bar.is-positive{background-color:#00d27f;text-align:right}
.bar.is-negative{background-color:var(--brand);text-align:right}
.bar.is-end{background-color:#9ca3af;color:#111;text-align:center}

/* ===== Data table (KiK-look, optioneel) ===== */
.data-table{
  width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border:1px solid #f0c9d6;border-radius:6px;overflow:hidden
}
.data-table thead th{
  background:#f7d9e5;color:#111;font-weight:600;padding:10px 12px;text-align:left;border-bottom:2px solid #f0c9d6
}
.data-table tbody tr:nth-child(odd){background:#fdf2f7}
.data-table tbody tr:nth-child(even){background:#fff}
.data-table tbody tr:hover{background:#fde4ef}
.data-table tbody td{padding:8px 12px;border-bottom:1px solid #f0c9d6}
.data-table th,.data-table td{text-align:right}
.data-table th:first-child,.data-table td:first-child{text-align:left}
.data-table td.is-negative{color:#dc2626;font-weight:600}
.data-table td.is-positive{color:#16a34a;font-weight:600}

/* ===== Mini-waterfalls (saldo/schuld) ===== */
.mini-waterfalls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:12px}
.mini-wf h3{margin:0 0 6px;font-size:1rem;font-weight:600;color:#111827}
.wf-track{display:flex;align-items:center;gap:6px}
.wf-step{flex:1;text-align:center;padding:6px;border-radius:6px;background:#f3f4f6}
.wf-step.basis{background:#d1d5db}
.wf-step.effect.pos{background:#bbf7d0;color:#065f46}
.wf-step.effect.neg{background:#fecaca;color:#991b1b}
.wf-step.totaal{background:#e0f2fe;color:#1e3a8a;font-weight:700}
.wf-val{display:block;font-variant-numeric:tabular-nums}
.wf-unit{margin:4px 0 0;font-size:.8rem;color:#6b7280;text-align:center}

/* ===== Boxplot kaart ===== */
.boxplot-grid{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.boxplot-row{display:flex;align-items:center;gap:16px}
.boxplot-row .label{flex:0 0 180px;font-size:.95rem;color:#374151}
.boxplot-row .val{flex:0 0 64px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.boxplot{position:relative;flex:0 0 100px;height:140px}
.boxplot .axis{position:absolute;left:-42px;width:40px;height:100%;display:flex;flex-direction:column;justify-content:space-between;color:#6b7280;font-size:.72rem}
.boxplot .axis .tick{position:relative}
.boxplot .axis .tick::after{content:'';position:absolute;left:40px;top:50%;transform:translateY(-50%);width:8px;height:1px;background:#e5e7eb}
.boxplot .whisker{position:absolute;left:50%;transform:translateX(-50%);width:2px;background:#9ca3af;border-radius:1px}
.boxplot .box{position:absolute;left:25%;width:50%;background:#dbeafe;border:1px solid #2563eb;border-radius:3px}
.boxplot .median{position:absolute;left:0;right:0;height:2px;background:#ef4444;border-radius:1px}
[data-card="koopkracht-boxplot"] .section-text{white-space:nowrap}
.legend-boxplot{display:flex;gap:18px;align-items:center;font-size:.8rem;color:#374151;margin-bottom:10px}
.legend-boxplot .legend-item{display:inline-flex;align-items:center;gap:6px}
.whisker-sample{display:inline-block;width:22px;height:2px;background:#9ca3af;border-radius:1px}
.box-sample{display:inline-block;width:18px;height:10px;background:#dbeafe;border:1px solid #2563eb;border-radius:2px}
.median-sample{display:inline-block;width:22px;height:2px;background:#ef4444;border-radius:1px}
[data-card="koopkracht-boxplot"] .boxplot-row:hover .box{box-shadow:0 0 0 2px rgba(37,99,235,.12) inset}

/* ===== Indicator score chips (future) ===== */
.indicator-score{
  font-weight:700;padding:2px 8px;border-radius:6px;font-size:.9rem;display:inline-block;min-width:2.2rem;text-align:center
}
.indicator-score.positive{background-color:#d1fae5;color:#065f46}
.indicator-score.strong-positive{background-color:#a7f3d0;color:#064e3b}
.indicator-score.negative{background-color:#fee2e2;color:#991b1b}
.indicator-score.strong-negative{background-color:#fecaca;color:#7f1d1d}
.indicator-score.neutral{background-color:#f3f4f6;color:#374151}

/* ===== Ten-step meter ===== */
.ten-scale{display:grid;gap:8px;margin-top:8px}
.ten-scale .row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.ten-scale .label{font-weight:600;color:#374151;min-width:64px}
.ten-scale .num{font-variant-numeric:tabular-nums;color:#6b7280;min-width:56px;text-align:right}
.ten-scale .track{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;align-items:center}
.ten-scale .seg{height:var(--bar-height-small);border-radius:999px;background:#e5e7eb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transition:background-color .2s ease,transform .15s ease}
.ten-scale .seg.active{transform:translateY(-.5px)}
.ten-scale .track.neutral .seg.active{background:var(--scale-color)}
.ten-scale .track.up .seg.active{background:var(--green)}
.ten-scale .track.down .seg.active{background:var(--brand)}
.value.neutral{color:#374151}
@media (max-width:640px){
  .ten-scale .row{grid-template-columns:auto 1fr}
  .ten-scale .num{grid-column:1/-1;text-align:left;padding-left:72px}
}

/* ===== Hundred-step LED meter ===== */
.hundred-scale{display:grid;gap:8px;margin-top:6px}
.hundred-scale .row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px
}
.hundred-scale .label{font-weight:600;color:#374151;min-width:64px}
.hundred-scale .num{font-variant-numeric:tabular-nums;color:#6b7280;min-width:80px;text-align:right}

/* LED-track (100 segmenten) */
.hundred-scale .track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(100,1fr);
  gap:3px;               /* afstand tussen de leds */
  align-items:center;
  height:var(--bar-height);
  padding:2px;           /* kleine binnenmarge voor afgeronde rail */
  background:#eef2f7;    /* railkleur */
  border-radius:999px;
}
.hundred-scale .cell{
  height:100%;
  border-radius:999px;
  background:#e5e7eb;                        /* inactief */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); /* subtiele rand */
  transition:background-color .15s ease;
}
.hundred-scale .cell.active{background:var(--scale-color)}      /* neutraal actief */
.hundred-scale .track.up   .cell.active{background:var(--scale-color)}
.hundred-scale .track.down .cell.active{background:var(--brand)}

/* optionele range-overlay + ticks blijven werken */
.hundred-scale .range-overlay{
  position:absolute;top:2px;bottom:2px;border-radius:999px;background:rgba(0,0,0,.10);pointer-events:none
}
.hundred-scale .ticks{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.hundred-scale .ticks i{position:absolute;top:-4px;width:1px;height:22px;background:rgba(0,0,0,.06)}
/* oude doorlopende vulling uitschakelen als die nog in de markup staat */
.hundred-scale .fill{display:none!important}

/* NEW NEW NEW */


/* ===== FOOTER ===== */
.card-footer{
  padding:20px 25px;font-size:.85em;color:var(--muted);
  background:#f3f4f6;border-top:1px solid #e5e7eb;
  border-bottom-left-radius:6px;border-bottom-right-radius:6px;
}
.cpb-footer{
  background:var(--brand-green); color:#fff; text-align:center;
  padding:1.5rem 0; font-size:.9em;
}
.footer-brand-block{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:.75rem}
.footer-logo{height:24px;width:auto;display:block}
.footer-brand{font-weight:700;font-size:1.1rem}
.footer-disclaimer{margin:0;font-size:1.05em;opacity:.9}

.footer-brand-block a {
  color:#fff;
}

.info-button{
  font-weight:600;color:var(--green);text-decoration:none;transition:color .2s;font-size:1.9em;
}

.explain-body{
  font-weight:400;color:var(--green);text-decoration:none;transition:color .2s;font-size:1.3em;
}

.contact{
  font-weight:600;color:var(--green);text-decoration:none;transition:color .2s;font-size:1.4em;
}



@media (max-width:640px){
  .hundred-scale .row{grid-template-columns:auto 1fr}
  .hundred-scale .num{grid-column:1/-1;text-align:left;padding-left:72px}
}

/* ===== Responsive tweaks ===== */
@media (max-width:768px){
  .card-title h2{font-size:1rem}
  .card-body .value{font-size:2.2em}
}

/* NEW STYLE 11-10-2025 *//* Partijenlijst: vaste kolombreedtes + tabular numbers */
.party-list .chart-row{grid-template-columns: 200px 1fr 92px;}
.party-list .chart-label{text-align:left;font-variant-numeric:tabular-nums;}
.party-list .chart-value{text-align:right;font-variant-numeric:tabular-nums;}

/* === Beleidspakket-balken: exact als voorbeeldkaart === */

/* layout rijen + vaste kolommen + tabular numbers */
.policy-chart-card.party-list .chart-area{display:flex;flex-direction:column;gap:24px}
.policy-chart-card.party-list .chart-row{display:grid;grid-template-columns:200px 1fr 92px;gap:16px;align-items:center}
.policy-chart-card.party-list .chart-label{text-align:right;font-size:.9em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.policy-chart-card.party-list .chart-value{text-align:right;font-size:.9em;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.policy-chart-card.party-list .chart-value.is-positive{color:var(--green)}
.policy-chart-card.party-list .chart-value.is-negative{color:var(--brand)}

/* bar-container + baseline (stippel) */
.policy-chart-card.party-list .bar-container{
  position:relative;width:100%;height:18px;background:#f0f2f5;border-radius:4px
}
.policy-chart-card.party-list .bar-container .baseline{
  position:absolute;left:50%;top:-6px;bottom:-6px;border-left:2px dotted var(--brand);z-index:2;
}

/* vulling balk: symmetrisch vanaf 50% */
.policy-chart-card.party-list .bar{
  position:absolute;top:0;height:100%;border-radius:4px;z-index:1;transition:width .3s ease-out
}
.policy-chart-card.party-list .bar.is-positive{left:50%;background:var(--scale-color)}
.policy-chart-card.party-list .bar.is-negative{right:50%;background:var(--scale-color)}

/* as boven de EERSTE balk */
.policy-chart-card.party-list .top-label-container{
  position:absolute;top:-22px;left:0;right:0;height:20px
}
.policy-chart-card.party-list .direction-text-top{
  position:absolute;font-size:.8em;color:#555;white-space:nowrap
}
.policy-chart-card.party-list .direction-text-top.abs-left-center{right:52%;text-align:right}
.policy-chart-card.party-list .direction-text-top.abs-right-center{left:52%}
.policy-chart-card.party-list .basispad-label{
  position:absolute;left:50%;transform:translateX(-50%);font-size:.8em;font-style:italic;color:var(--muted)
}

/* header-icoon en titel: match voorbeeldkaart */
.policy-chart-card .card-icon{
  background:var(--card-icon-color); /* roze vlak uit je CSS */
  color:var(--brand);
  border-radius:8px;width:48px;height:48px;display:flex;justify-content:center;align-items:center
}
.policy-chart-card .card-icon svg{width:30px;height:30px;stroke:var(--brand)}
.policy-chart-card .card-title h2{color:var(--ink-colored)}

/* ===== Per-partij LED + ticks (0–100) ===== */
.party-list .chart-row{
  display:grid; grid-template-columns:180px 1fr 72px; gap:.75rem; align-items:center; margin:.35rem 0;
}
.party-list .chart-label.right{ text-align:right; opacity:.9; }
.party-list .num{ justify-self:end; font-variant-numeric:tabular-nums; }

.party-list .led-100{ position:relative; }
.party-list .axis-0-100{
  position:absolute; left:0; right:0; top:-1.6rem;
  display:grid; grid-template-columns:1fr 1fr 1fr; font-size:.8rem; color:var(--muted-text,rgba(0,0,0,.6));
}
.party-list .axis-0-100 .axis-left{justify-self:start}
.party-list .axis-0-100 .axis-center{justify-self:center}
.party-list .axis-0-100 .axis-right{justify-self:end}

/* Zorg dat de LED-track in rijen werkt */
.party-list .hundred-scale .row{ display:block; }
.party-list .hundred-scale .track.up{
  position:relative; height:14px;
  display:grid; grid-template-columns:repeat(100,1fr);
  gap:1px; border-radius:999px; background:var(--track-bg,rgba(0,0,0,.06));
}
.party-list .hundred-scale .track .cell{
  display:block; border-radius:2px; /* kleur inactive/active komt uit je bestaande thema */
}
.party-list .hundred-scale .track .ticks i{
  position:absolute; top:-5px; width:1px; height:24px; background:rgba(0,0,0,.12);
}

/* ==== Amount-chip uniform boven de LED-track ==== */
.amount-chip{
  position:absolute; z-index:4; display:inline-flex; align-items:center; white-space:nowrap;
  padding:.25rem .5rem; border-radius:.5rem; font-size:.85rem; line-height:1;
  background:var(--chip-bg, rgba(0,0,0,.78)); color:var(--chip-fg,#fff); box-shadow:0 2px 6px rgba(0,0,0,.18);
  transform:translateX(-50%); /* X-centreren; Y komt hieronder per variant */
}
.amount-chip::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:0; height:0; border:6px solid transparent;
}

/* BOVEN DE BALK (uniforme hoogte, afgeleid van echte chiphoogte) */
.amount-chip.above{
  top:0;                                      /* anker aan bovenzijde track */
  transform:translate(-50%, calc(-100% - var(--chip-gap, 8px)));
}
.amount-chip.above::after{
  top:100%; border-top-color:var(--chip-bg, rgba(0,0,0,.78));
}

/* Eérste rij met aslabels krijgt alleen extra gap; overige rijen exact gelijk */
.track.with-axis{ --chip-gap: 26px; }         /* maak deze waarde gelijk aan hoogte as/ticks */
.track:not(.with-axis){ --chip-gap: 10px; }

/* INLINE (in de balk) – blijft strak in het midden van de strip */
.amount-chip.inline{ top:50%; transform:translate(-50%, -50%); background:var(--chip-inline-bg, var(--color-up,#22C55E)); color:#fff; }
.amount-chip.inline::after{ display:none; }

/* Zorg dat track een positioning context is */
.party-list .led-100{ position:relative; }
.party-list .hundred-scale .track.up{ position:relative; display:grid; grid-template-columns:repeat(100,1fr); gap:1px; height:14px; border-radius:999px; background:var(--track-bg,rgba(0,0,0,.06)); }
.party-list .hundred-scale .track.up .cell{ height:100%; border-radius:2px; background:var(--led-off,rgba(0,0,0,.08)); }
.party-list .hundred-scale .track.up .cell.active{ background:var(--led-on,var(--color-up,#22C55E)); }
.party-list .hundred-scale .track.up .ticks{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.party-list .hundred-scale .track.up .ticks i{ position:absolute; top:-6px; width:1px; height:26px; background:rgba(0,0,0,.12); }

.policy-chart-card.party-list .bar.is-positive { background: var(--green); }
.policy-chart-card.party-list .bar.is-negative { background: var(--brand); }

/* Zorg dat de kaart een positioneringscontext heeft */
.infographic-card { position: relative; }

/* Cirkelvormige witte badge met zwarte rand, rechtsboven */
.theme-icon-badge{
  position: absolute;
  top: -14px;             /* iets buiten de kaart voor 'stempel'-effect */
  right: -14px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;  /* perfect rond */
  background: #fff;
  border: 2px solid var(--green, #1a7f37);
  display: grid;
  place-items: center;    /* afbeelding centreren */
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 3;             /* boven badges / header */
}

.theme-icon-badge.info {
  border: 2px solid var(--info, #696969);
}

/* Icoon binnen de badge schaalt netjes in de cirkel */
.theme-icon-badge img{
  max-width: 70%;
  max-height: 70%;
  display: block;
}

.contact-card a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.contact-card a:hover{ opacity:.9; }
.contact-card .sep{ margin:0 .5rem; opacity:.85; }

/* === OpenCPB responsive patch (phones + small landscape) === */

/* laat de LED-kolom echt krimpen binnen grid */
.party-list .led-100 { min-width: 0; }

/* PORTRET-TELEFOON (iPhone e.d.) */
@media (max-width: 480px){
  /* stapel layout: label + score boven, balk eronder, full width */
  .party-list .chart-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label num"
      "track track";
    align-items: center;
    gap: 6px 10px;
  }
  .party-list .chart-label { grid-area: label; text-align: left; font-size: .95rem; }
  .party-list .led-100     { grid-area: track; width: 100%; }
  .party-list .num         { grid-area: num; justify-self: end; font-size: .85rem; }

  /* maak de 100-LED balk compacter zodat hij zichtbaar blijft */
  .party-list .hundred-scale .track.up { gap: 0; height: 12px; }
  .party-list .hundred-scale .cell     { border-radius: 0; }

  /* as/labels & chip leesbaar houden */
  .party-list .axis-0-100 { top: -1.2rem; font-size: .72rem; }
  .amount-chip            { font-size: .75rem; padding: .20rem .40rem; }
  .track.with-axis        { --chip-gap: 20px; }

  /* badge en paddings iets binnen de kaart trekken */
  .theme-icon-badge { top: 6px; right: 6px; width: 46px; height: 46px; }
  .card-badges      { left: 16px; right: 16px; }
  .card-section     { padding: 18px 16px 22px; }
}

/* SMALLE LANDSCAPE (telefoon horizontaal): label strakker, balk breder */
@media (max-width: 900px) and (orientation: landscape){
  .party-list .chart-row { grid-template-columns: 120px 1fr 72px; }
  .party-list .chart-label, .party-list .num { font-size: .85rem; }
}

/* voorkom horizontale scroll door badges buiten de kaart */
html, body { overflow-x: hidden; }


/* --- RESPONSIVE OVERRIDES (plak dit onderaan je CSS) ----------------------- */

/* 1) Maak totale breedtes echt fluid */
:root{
  --wrap: clamp(320px, 96vw, 1180px);
  --card-width: clamp(320px, 96vw, 1100px);
}

/* 2) Ronde thema-badge: verberg in portrait; zet 'm binnen de kaart in lage landscape */
@media (orientation: portrait){
  .theme-icon-badge{ display:none; }
}
@media (orientation: landscape) and (max-width: 896px){
  .theme-icon-badge{ right: 8px; top: 8px; }
}

/* 3) Bovenbadges: op mobiel niet absoluut (geen overlap/clip) */
@media (max-width: 640px){
  .card-badges{
    position: static; top:auto; left:auto; right:auto;
    margin: -10px 0 6px; padding: 0 12px;
  }
  .section-badge{ margin-left:0; border-radius:10px; padding:10px 14px; font-size:1.1rem; }
  .badge-group-right{ gap:6px; }
  .party-logo-badge{ height:30px; width:30px; }
  .party-name-badge{ font-size:.8rem; padding:2px 8px; }
  .card-section{ padding-top:18px; } /* i.p.v. grote top-padding voor absolute badge */
}

/* 4) Partijenrijen: fluid kolommen; stack op kleine schermen */
.party-list .chart-row{
  grid-template-columns: clamp(110px, 32vw, 200px) 1fr clamp(56px, 10vw, 92px);
}
@media (max-width: 520px){
  .party-list .chart-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "led"
      "num";
    gap: 6px;
  }
  .party-list .chart-label.right{ grid-area: label; text-align: left; }
  .party-list .led-100{ grid-area: led; }
  .party-list .num{ grid-area: num; justify-self: end; }
}

/* 5) 100-LED meter: kleiner gap/hoogte op mobiel, compactere aslabels */
@media (max-width: 820px){
  .hundred-scale .track{ gap: 2px; }
}
@media (max-width: 520px){
  .hundred-scale .track{ gap: 1px; height: 12px; padding: 2px; }
  .hundred-scale .ticks i{ height: 20px; top: -4px; }
  .party-list .axis-0-100{ top: -1.1rem; font-size: .72rem; }
}
@media (max-width: 400px){
  .hundred-scale .track{ gap: .5px; }
  .party-list .axis-0-100 .axis-left,
  .party-list .axis-0-100 .axis-right{ display:none; }
  .party-list .axis-0-100{ grid-template-columns: 1fr; }
}

/* 6) Altijd ruimte voor chip/assen boven de eerste balk (geen clipping) */
.party-list .led-100{ padding-top: 16px; }
.track.with-axis{ --chip-gap: 22px; }
@media (max-width: 520px){ .track.with-axis{ --chip-gap: 16px; } }

/* 7) Landscape-telefoons: iets krapper, zodat de balk écht de kaart vult */
@media (orientation: landscape) and (max-height: 480px){
  .party-list .chart-row{ gap: 10px; }
  .party-list .chart-label{ font-size: .8rem; }
}

/* 8) Safari/iOS rounding fix voor 100-koloms grid */
.hundred-scale .cell{ min-width: 0; }

/* 9) Veiligheidsnet: geen horizontale scroll op mobiel */
@media (max-width: 640px){
  body{ overflow-x: hidden; }
}

/* Hoek-docking: badge hangt strak aan de rechterbovenhoek van de kaart */
.infographic-card{ position:relative; overflow:visible; }

.theme-icon-badge{
  --s: 56px;          /* badge size */
  --b: 2px;           /* border width */
  width: var(--s);
  height: var(--s);
  position: absolute;
  top: 0;             /* exact hoek-anker */
  right: 0;
  border-radius: 9999px;
  background: #fff;
  border: var(--b) solid var(--green, #1a7f37);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 3;

  /* laat de badge ~40% buiten de hoek “zweven” */
  transform: translate(40%, -40%);
  backface-visibility: hidden;          /* iOS subpixel fix */
  -webkit-font-smoothing: antialiased;  /* iOS render tweak */
  will-change: transform;
}
.theme-icon-badge.info{ border-color: var(--info,#696969); }
.theme-icon-badge img{ max-width:70%; max-height:70%; display:block; }

/* Kleinere schermen/landscape: iets minder overhang, voorkomt clippen */
@media (orientation: landscape) and (max-height: 480px){
  .theme-icon-badge{ transform: translate(32%, -32%); --s: 52px; }
}

/* iOS-specifiek: rond af op hele pixels om wiebelen te voorkomen */
@supports (-webkit-touch-callout: none){
  .theme-icon-badge{
    /* pixel-snapping via translate3d force */
    transform: translate3d(32%, -32%, 0);
  }
}

/* Portrait blijft verborgen zoals eerder ingesteld */
@media (orientation: portrait){
  .theme-icon-badge{ display:none; }
}