/* Alleen uitvoeren als het systeem op Dark Mode staat */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    body {
        /* Gebruik de standaard donkere kleuren van Bootstrap */
        background-color: #000; /* --bs-body-bg-dark */
        color: #fff!important; /* --bs-body-color-dark */
    }

    /* Specifieke Bootstrap elementen die mee moeten kleuren */
    .card, .modal-content, .list-group-item {
        background-color: #2c3034;
        border-color: #495057;
        color: #fff;
    }

    .table {
        --bs-table-color: #fff;
        --bs-table-bg: #212529;
        --bs-table-border-color: #373b3e;
    }

    h1, h2, h3, h4, h5, h6 {color:#fff;}

    :root {
        --bs-table-striped-color: #ffffff !important;
        --bs-table-color: #ffffff !important;
        --bs-table-color-state: #ffffff !important;
        --bs-emphasis-color: #fff;
        --bs-heading-color: #fff!important;
    }
}


/* Bootstrap 3 correcties*/
    label {
        font-weight: 500;
    }

/* standaard stijlen voor numerieke waarden */

/*decimale en money waarden */
.d, .m, .n {text-align: right;}
/* boolean , wordt vinkje als glyphicon getoond */
.b {text-align:center;}

.nav-link !important {
    color: #212529;
}

/*bootstrap rounded circle*/
.btn-circle.btn-xs {
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 0px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 10px;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 35px;
}

/*padding bootstrap 4*/
.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

/* schaduwen */
.z-depth-3 {
    box-shadow: 0 12px 15px 0 rgba(0,0,0,.24), 0 17px 50px 0 rgba(0,0,0,.19);
}

/* textcounter onder input fields*/

.textcounter {font-size:9px;margin-top:3px;}

/* bootstrapalerts hebben bruine fontkleur*/
.alert{color:#1F2544}

/* help-block voor validatietekst in form validation*/
SPAN.help-block {
    font-size:smaller;
    margin:0;
}

.htmlafterinput {
    font-size:smaller;
    background-color:InfoBackground;
    color:InfoText;
    padding:2px;
}


/* Voor keywords */
ul.keywords {list-style-type:none}
ul.keywords > li {display:inline; }
ul.keywords > li > a > dfn { font-style:normal; }

/* Share buttons */
.share-buttons-embedded {
   text-align:center;
   padding:10px;
}

.share-buttons > svg {width:16px;font-size:1.1em;margin:10px;cursor:pointer;}

/*    background-color: #00bd6f;*/
.share-buttons.whatsapp {
/*    color: #fff;*/
    color: #00bd6f;
    padding: 3px;
    border-radius: 3px;
}

.share-buttons.facebook {
    color: #4c66a4;
}

.share-buttons.twitter {
    color: #00a0d1;
}

.share-buttons.linkedin {
    color: #0082b9;
}

.fab.fa-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
}

.share-buttons.email {
    color: #c40000;
}

.share-buttons.api {
    color: #222;
}

.share-buttons > svg {width:18px;height:18px;}

.modal-dialog{z-index:999999999999;}

/*li.dropdown > a::after, li.open > a::after {
    display:inline-block;
    content: ' ';
    background-image: url('/libs/fa/svgs/light/sort-down.svg');
    background-size: 18px 15px;
    height: 15px;
    width: 18px;
}*/

/* testtabel voor mailing  mailer.cs */

#table-mailing-test td {padding:2px;border:1px solid #ccc;font-size:smaller}

.btn-group-xs > .btn, .btn-xs {
    padding: .3rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}



.container-reading {
    max-width: 720px; /* Ideale breedte voor leesbaarheid */
    margin-left: auto;
    margin-right: auto;
}




/* IMPORTANT:  The SCW calendar script requires all       
                    the classes defined here.                  
    */
table.scw {
    padding: 1px;
    vertical-align: middle;
    border: ridge 2px;
    font-size: 10pt;
    font-family: Arial,Helvetica,Sans-Serif;
    font-weight: bold;
}

td.scwDrag,
td.scwHead {
    padding: 0px 0px;
    text-align: center;
}

td.scwDrag {
    font-size: 8pt;
}

select.scwHead {
    margin: 3px 1px;
}

input.scwHead {
    height: 22px;
    width: 22px;
    vertical-align: middle;
    text-align: center;
    margin: 2px 1px;
    font-weight: bold;
    font-size: 10pt;
    font-family: fixedSys;
}

td.scwWeekNumberHead,
td.scwWeek {
    padding: 0px;
    text-align: center;
    font-weight: bold;
}

td.scwFoot,
td.scwFootHover,
td.scwFoot:hover,
td.scwFootDisabled {
    padding: 0px;
    text-align: center;
    font-weight: normal;
}

table.scwCells {
    text-align: right;
    font-size: 8pt;
    width: 96%;
}

td.scwCells,
td.scwCellsHover,
td.scwCells:hover,
td.scwCellsDisabled,
td.scwCellsExMonth,
td.scwCellsExMonthHover,
td.scwCellsExMonth:hover,
td.scwCellsExMonthDisabled,
td.scwCellsWeekend,
td.scwCellsWeekendHover,
td.scwCellsWeekend:hover,
td.scwCellsWeekendDisabled,
td.scwInputDate,
td.scwInputDateHover,
td.scwInputDate:hover,
td.scwInputDateDisabled,
td.scwWeekNo,
td.scwWeeks {
    padding: 1px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* Blend the colours into your page here...    */
/* Calendar background */
table.scw {
    background-color: #ffffff;
}
/* Drag Handle */
td.scwDrag {
    background-color: #9999CC;
    color: #CCCCFF;
}
/* Week number heading */
td.scwWeekNumberHead {
    color: #6666CC;
}
/* Week day headings */
td.scwWeek {
    color: #333333;
}
/* Week numbers */
td.scwWeekNo {
    background-color: #ffffff;
    color: #333333;
}
/* Enabled Days */
/* Week Day */
td.scwCells {
    background-color: #CCCCCC;
    color: #000000;
}
/* Day matching the input date */
td.scwInputDate {
    background-color: #CC9999;
    color: #FF0000;
}
/* Weekend Day */
td.scwCellsWeekend {
    background-color: #CCCCCC;
    color: #CC6666;
}
/* Day outside the current month */
td.scwCellsExMonth {
    background-color: #CCCCCC;
    color: #666666;
}
/* Today selector */
td.scwFoot {
    background-color: #ffffff;
    color: #333333;
}
/* MouseOver/Hover formatting                             
            If you want to "turn off" any of the formatting    
            then just set to the same as the standard format   
            above.                                             
                                                                      
            Note: The reason that the following are            
            implemented using both a class and a :hover        
            pseudoclass is because Opera handles the rendering 
            involved in the class swap very poorly and IE6     
            (and below) only implements pseudoclasses on the   
            anchor tag.                                        
    */
/* Active cells */
td.scwCells:hover,
td.scwCellsHover {
    background-color: #FFFF00;
    cursor: pointer;
    color: #000000;
}
/* Day matching the input date */
td.scwInputDate:hover,
td.scwInputDateHover {
    background-color: #FFFF00;
    cursor: pointer;
    color: #000000;
}
/* Weekend cells */
td.scwCellsWeekend:hover,
td.scwCellsWeekendHover {
    background-color: #FFFF00;
    cursor: pointer;
    color: #000000;
}
/* Day outside the current month */
td.scwCellsExMonth:hover,
td.scwCellsExMonthHover {
    background-color: #FFFF00;
    cursor: pointer;
    color: #000000;
}
/* Today selector */
td.scwFoot:hover,
td.scwFootHover {
    color: #FFFF00;
    cursor: pointer;
    font-weight: bold;
}
/* Disabled cells */
/* Week Day */
/* Day matching the input date */
td.scwInputDateDisabled {
    background-color: #999999;
    color: #000000;
}

td.scwCellsDisabled {
    background-color: #999999;
    color: #000000;
    text-decoration: line-through;
}
/* Weekend Day */
td.scwCellsWeekendDisabled {
    background-color: #999999;
    color: #CC6666;
    text-decoration: line-through;
}
/* Day outside the current month */
td.scwCellsExMonthDisabled {
    background-color: #999999;
    color: #666666;
    text-decoration: line-through;
}

td.scwFootDisabled {
    background-color: #ffffff;
    color: #333333;
}  
/* end /css/pre*/
/*list groups*/

ul.list-group li {
    border: 0;
}

ul.list-group li:before {
    content: '';
    display: inline-block;
    height: 0.6em;
    width: 0.6em;
    background-image: url('/icons/chevron-breadcrum.svg');
    background-size: contain;
    background-repeat: no-repeat;
    color: #337ab7;
    padding-left: 1em;
}


/*Video*/

articles {
    padding-top: calc(var(--bs-gutter-x)/ 2);
    padding-bottom: calc(var(--bs-gutter-x)/ 2);
}

article {
    margin-bottom: 0.5rem;
}

/*.row>* {padding-left:0;padding-right:0;}*/

.post-div {
    width: 100%;
    position: relative;
    min-height: 200px;
    transition: transform .2s ease;
}

/*@media screen and (max-width: 768px) {
    .post-div {
        min-height:100px;
    }
}*/

.post-image {
    position: absolute;
    height: 100%;
    position: absolute;
    width: 100%;
    background-size: cover;
    transition: transform .5s;
    border-radius: var(--bs-border-radius) !important;
}

.post-div:hover .post-image {
    transform: scale(1.05);
}

.post-bg {
    overflow: hidden;
}

.post-footer {
    bottom: 0;
    width: 100%;
    padding: 20px 10px 10px 10px;
    color: #fff;
    line-height: 18px;
    background: linear-gradient(transparent,#000000d1);
}

.post__video {
    color: #fff;
    background-color: #5084D0;
    height: 48px;
    padding: 12px 11px 12px 13px;
    right: 0;
    top: 0;
    width: 48px;
    position: absolute;
}

.icon path {
    fill: currentColor;
}

.post-div:hover .icon {
    /*
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
*/
}

.embeddedsubject {
    background-color: #5084D0;
    color: white;
    padding: 3px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 5px
}


/*stemwijzer*/

.vote_omschrijving {
    margin-bottom: 1.5em;
}

.slides li h2 {
    margin-bottom: 1em
}

.progress {
    margin-bottom: 1em
}

.card-uitleg {
    background: #e5f5f5;
    margin: 1em;
}

[data-bs-target="#collapseExample"].collapsed {
    display: none;
}

[data-bs-target="#collapseExample"] {
    float: right;
    position: relative;
    right: 30px;
    z-index: 99;
    top: 8px;
}

.theme-select {
    display: flex;
    align-items: center;
    padding: 0.3em 1em;
    background: #e5f5e5;
}

.theme-select h3 {
    font-size: 16px
}

.theme-select h3:after {
    content: ':';
    margin-right: 1em;
}

.thema_block .btn {
    background-color: transparent;
    border-color: transparent;
    border-radius: 0 !important;
    color: black;
}

.thema_block .btn.active {
    font-weight: bold;
    background-color: #c4ddc4;
    text-decoration: underline;
}

.hoekje {
    float: right;
}

/* sticky table header moties */
.location-votes .table-responsive {
    position: relative;
    max-height: 100vh;
    overflow: scroll;
}

.location-votes thead tr:last-child th {
    background-color: #ddd;
    position: sticky;
    top: 0;
}

.location-votes th:first-child {
    border-right: 1px solid silver;
    position: sticky;
    left: 0;
}

.location-votes .statusbar tr:nth-child(even) th {
    background-color: #ddd;
}

.location-votes .statusbar tr:nth-child(odd) th {
    background-color: white;
}

.pivot-th-header {text-align:center}

/*Tags*/

.ArticleTags__articleTagsList {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}

.ArticleTags__tag {
    font-display: swap;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #3A3E3F;
    background-color: #D2D5D7;
    border-radius: 100px;
    text-decoration: none;
    padding: 4px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 32px;
    border: 0;
}

.ArticleTags__tag::after {
    content: url(/icons/plus.svg);
    margin-left: 8px;
    width: 8px;
}


/*Menu hover*/

/*.nav-link:hover, .nav-item.activelink >a  {
    text-decoration: none;
}

.nav-link::after {
    content: "";
    display: block;
    margin: auto;
    height: 3px;
    width: 0;
    top: 5px;
    background: transparent;
    transition: all 0.3s;
}

.nav-link:hover::after, .nav-item.activelink > a::after {
    width: 100%;
    background: #1b75bb;
}
*/
/* end /common/test/central*/
/* ═══════════════════════════════════════════════════════
   BP_NEW_SUBJECT.CSS — Burgerplatform
   Alleen structuur en layout.
   Kleuren en fonts → bp_new.css
   Dark mode → bp_darkmode.css
═══════════════════════════════════════════════════════ */

/* ── Sticky footer structuur ────────────────────────── */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Content offset voor fixed header ───────────────── */
body > section,
body > section > .container {
    padding-top: var(--header-h, 80px) !important;
}


/* ── Header (sticky) ────────────────────────────────── */
header {
    border-bottom: .0625rem solid var(--border-color);
    box-shadow: 0 1px 4px rgba(0,0,0,.02);
    left: 0;
    margin-bottom: 0;
    position: fixed;
    top: 0;
    transition-duration: .2s;
    transition-property: transform, opacity, box-shadow, padding, background-color;
    transition-timing-function: ease-in-out;
    width: 100%;
    z-index: 1999999998;
    background-color: var(--surface);
}

header.scrolled .navbar {
    padding: 8px 4px;
}

header.scrolled {
    box-shadow: 0 1px 4px rgba(0,0,0,.02);
    /* backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); */
    background-color: rgba(255,255,255,0.92);
}

@media (prefers-color-scheme: dark) {
    header.scrolled {
        background-color: rgba(20,20,20,0.92);
    }
}

/* ── Logo ───────────────────────────────────────────── */
svg#BP {
    width: 100px;
    height: 100px;
    vertical-align: middle;
    fill: currentColor;
}

#header-logo {
    image-rendering: auto;
    -webkit-transform: translateZ(0);
}

.header-logo {
    margin-left: 10px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: center;
}

img.header-logo {
    cursor: pointer;
    max-width: 100%;
    max-height: 80px;
}

/* ── Links ──────────────────────────────────────────── */
a {
    transition: color 0.2s;
    text-decoration: none;
    color: var(--accent);
}

a[target="_blank"]::after {
    content: " " url(/icons/box-arrow-up-right.svg);
}

/* .btn-primary tekstkleur staat nu in bp_darkmode.css (basis-laag), niet dubbel hier. */

/* ── Typografie ─────────────────────────────────────── */
h1, h2 {
    color: var(--ink);
    margin-top: 10px;
    margin-bottom: 20px;
}

h1#pagetitle {
    padding-top: 28px;
    margin-bottom: 16px;
}

h3, h4, h5 {
    color: var(--accent);
    font-size: 1.2rem;
}

h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
    font-size: 2rem;
}

h3 > a {
    text-decoration: none;
}

/* ── Navigatie ──────────────────────────────────────── */
.navbar {
    padding: 8px 0;
}

.navbar-nav a.nav-link,
.navbar-nav a.dropdown-item {
    background-color: transparent;
    color: var(--ink-mid);
    display: block;
    letter-spacing: 0.5px;
    line-height: 1;
    padding: 10px 15px;
    text-decoration: none;
    transition: color 0.2s;
}

.navbar-nav a.nav-link:hover {
    color: var(--accent);
}

.navbar-toggler {
    color: white;
    border: 0 none !important;
    float: right;
}

.bi-list { color: #fff; fill: #fff; }

.navbar-toggler-icon > svg path {
    fill: white;
}

/* Dropdown pijltje */
.nav-link::after,
.nav-item.activelink > a::after {
    display: none;
}

li.nav-item.dropdown > a::after {
    content: '';
    display: inline;
    position: absolute;
    top: 42%;
    right: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--accent);
    clear: both;
}

li.nav-item.dropdown:hover > a::after {
    border-top-color: var(--accent);
}

.navbar-expand-lg .navbar-nav li.dropdown a.nav-link {
    padding-right: 24px;
}

.nav-link:hover, .nav-item.activelink > a {
    text-decoration: none;
}

.navbar-nav .nav-item.activelink > a::after {
    content: "";
    display: block;
    margin: 6px auto 0;
    height: 2px;
    width: 20px;
    background: var(--accent);
    transition: all 0.3s;
    border-radius: 2px;
}

.navbar-nav li.dropdown > a::after,
.navbar-nav li.open > a::after {
    background-image: unset;
    background-size: unset;
    height: unset;
    width: unset;
}

/* ── Desktop dropdown ───────────────────────────────── */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu { display: none; }
    .navbar .nav-item:hover .dropdown-menu { display: block; }
    .navbar .nav-item .dropdown-menu { margin-top: 0; }
}

/* ── Dropdown menu styling ──────────────────────────── */
.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 6px;
    min-width: 180px;
}

.navbar-nav a.dropdown-item {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.9rem;
    letter-spacing: 0;
}

.navbar-nav a.dropdown-item:hover {
    background-color: var(--accent-lt);
    color: var(--accent);
}

/* ── List group ─────────────────────────────────────── */
li.list-group-item.activelink {
    color: #fff;
    background-color: var(--accent);
}

li.list-group-item.activelink a {
    color: #fff;
}

/* ── Kaarten ────────────────────────────────────────── */
.card {
    box-shadow: none !important;
    margin-bottom: 20px;
}

div.cardsubscriber {
    border-top: 3px solid #84BD86 !important;
    border-left: 1px solid #84BD86 !important;
    border-bottom: 1px solid #84BD86 !important;
    border-right: 1px solid #84BD86 !important;
}

/* ── Sidebar ────────────────────────────────────────── */
#rightcol {
    padding-left: 20px;
}

.linklist li {
    border-bottom: 2px solid var(--border-color);
    padding: 10px 0 0 0;
}

/* ── Formulieren ────────────────────────────────────── */
.textcounter {
    visibility: hidden;
    display: none;
}

::-webkit-input-placeholder { color: var(--ink-soft); }
::-moz-placeholder { color: var(--ink-soft); }
:-ms-input-placeholder { color: var(--ink-soft); }

/* ── Afbeeldingen ───────────────────────────────────── */
.header-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: center;
}

figure.wp-block-image img {
    width: 100% !important;
    height: auto;
}

/* ── Overige klassen ────────────────────────────────── */
.maincontent-wrapped {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.header-name {
    font-size: 1.0em;
}

.payoff {
    text-align: center;
    font-size: 40px;
    height: 1px;
}

.payoff p { margin: 0; }

.like_footer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.a2a_kit {
    margin-bottom: 50px;
}

.googlelogin {
    width: 45%;
    float: left;
}

/* ── Doelgroep labels ───────────────────────────────── */
.targetgroup_person {
    background-color: #e9c4b1;
    color: #595959;
}

.targetgroup_organization {
    background-color: #c6db88;
    color: #595959;
}

.targetgroup_government {
    background-color: #eed988;
    color: #595959;
}

/* ── Label lijsten ──────────────────────────────────── */
ul.labellist,
ul.labelsublist {
    list-style-type: none !important;
    padding-left: 0;
}

.labelsublist li {
    position: relative;
    padding-left: 25px;
}

/* ── Mobiel ─────────────────────────────────────────── */
@media (max-width: 768px) {
    body { background-size: auto; }

    #div-maincontainer { padding: 1em; }

    .thema_block { display: none !important; }

    p, .jumbotron p, #jumbotronlist > ol > li, ul li {
        font-size: 16px;
        font-weight: 500;
    }

    .col-lg-15 {
        width: 100%;
        float: left;
        text-align: center;
        padding-left: 40px;
        padding-right: 40px;
        margin-bottom: 30px;
    }

    .judgement_partyname { margin-left: 15px; }

    .judgement_name {
        margin-left: 15px;
        border-left: none !important;
        padding-top: 0;
    }

    #petitie .form-group { margin-bottom: 4px; }
    #petitie .form-group label { margin-bottom: 0; }
}

@media screen and (min-width: 768px) {
    .thema_select_small { display: none !important; }
}

@media (max-width: 768px) and (orientation: portrait) {
    .rotate-hint { display: block; }
}

/* ── Stemwijzer ─────────────────────────────────────── */
.judgement_name { padding: 10px 0; }
.judgement_partyname { padding-top: 12px; font-size: 17px; }

#judgement {
    border-collapse: collapse;
    border: 0 solid #ccc !important;
}

.theme-select {
    display: flex;
    align-items: center;
    padding: 0.3em 1em;
    background: #e5f5e5;
}

.theme-select h3 { font-size: 16px; }
.rotate-hint { display: none; }

/* Nieuwe Google vertalingen met dropdown */
.goog-te-gadget > span,
.goog-te-gadget > a,
.goog-logo-link { 
    display: none !important; 
}
.goog-te-gadget { 
    font-size: 0 !important; 
}

/* ── Taal dropdown ──────────────────────────────────── */
.bp-lang-btn {
    border: 1.5px solid var(--border-color);
    color: var(--ink-mid);
    background: transparent;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: 50px;
}

.bp-lang-btn:hover,
.bp-lang-dropdown.show .bp-lang-btn {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
}
/* end /common/bp_new_subject*/
/* ═══════════════════════════════════════════════════════
   BP_DARKMODE.CSS — Burgerplatform  (BASIS-LAAG)
   Sitebreed geladen via master template (bp_new.htm)
   Ondanks de naam is dit de basis-laag: design-tokens (:root),
   body-font, en de sitebrede UI die overal geldt — topbar,
   knoppen (.btn-primary / .btn-outline-custom), .nav-link.active,
   footer, en de drie -card klassen. Plus alle dark mode overrides.
   Deze regels stonden eerder óók in bp_new.css; die duplicaten
   zijn nu weg — dit bestand is de enige bron.
   Accent light: #0d5c8a / dark: #3aa0e0
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   TOKENS — light mode basis
══════════════════════════════════════════════════════ */
:root {
    --accent:        #0d5c8a;
    --accent-dk:     #094a70;
    --accent-lt:     #e8f2f9;
    --bg:            #f5f7fa;
    --surface:       #ffffff;
    --ink:           #0f1923;
    --ink-mid:       #3a4553;
    --ink-soft:      #6b7988;
    --border-color:  #dde3ea;
    --signal:        #b85c00;
    --bg-main:       #ffffff;
    --text-main:     #1a1a1a;
    --card-bg:       #f8f9fa;
    --header-h: 80px;
}

/* ══════════════════════════════════════════════════════
   TOKENS — dark mode overrides
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #0a0a0a;
        --surface:       #141414;
        --ink:           #f0f2f4;
        --ink-mid:       #a8b4c0;
        --ink-soft:      #6b7988;
        --accent:        #3aa0e0;
        --accent-dk:     #1a88cc;
        --accent-lt:     #0d2a3d;
        --border-color:  #2a2a2a;
        --signal:        #ff8c1a;
        --bg-main:       #0a0a0a;
        --text-main:     #f0f2f4;
        --card-bg:       #141414;
        /* Bootstrap variabelen */
        --bs-body-bg:       #0a0a0a;
        --bs-body-color:    #f0f2f4;
        --bs-light-rgb:     10, 10, 10;
        --bs-white-rgb:     20, 20, 20;
        --bs-secondary-rgb: 240, 242, 244;
        --bs-border-color:  #2a2a2a;
    }
}

/* ══════════════════════════════════════════════════════
   BASE — sitebreed, beide modes
══════════════════════════════════════════════════════ */

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background-color: var(--bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Topbar ─────────────────────────────────────────── */
.topbar {
    background-color: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    padding: 5px 0;
}

/* ── Logo dark mode ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    #header-logo {
        filter: brightness(0) invert(1);
    }
}

/* ── Knoppen ────────────────────────────────────────── */
.btn-primary {
    background-color: var(--accent);
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--accent-dk);
}

.btn-outline-custom {
    border: 1.5px solid var(--border-color);
    color: var(--accent);
    font-weight: 600;
}

.nav-link.active {
    color: var(--accent) !important;
}

/* ── Kaarten ────────────────────────────────────────── */
.pillar-card {
    border-left: 1px solid var(--border-color);
    padding-left: 20px;
}

.rekening-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.signup-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ── Footer — beide modes ───────────────────────────── */
footer {
    padding: 80px 0 40px;
    background: #094a70;
    color: #c8dce8;
}

footer h4 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

footer h6 {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

footer a {
    color: #c8dce8;
    text-decoration: none;
    transition: color 0.2s;
}

footer a:hover {
    color: #ffffff;
}

footer p {
    color: #c8dce8;
}

footer .border-bottom,
footer .border-secondary {
    border-color: #1a5070 !important;
}

/* ── Footer navigatie (via [menu] hergebruik) ─────────
   Elke menugroep (Dossiers, Organisaties, ...) is een eigen
   kolom met de items netjes onder elkaar.

   Was: display:grid met repeat(3, 1fr). Twee problemen:
   1fr kan niet kleiner worden dan de langste link, dus een
   label als "Democratische organisatie van partijen" duwde
   het raster buiten de kolom, over de share-knoppen heen.
   En grid-rijen zijn zo hoog als hun langste groep, wat gaten
   gaf onder Organisaties.

   Nu: CSS multi-column. Groepen blijven heel (break-inside),
   vullen de kolommen zonder gaten, en column-width zorgt dat
   er vanzelf minder kolommen komen als de ruimte krap is.  */

/* Ruimte herverdelen: nav krijgt de helft, merk en share de rest.
   Zo hoeft de template-HTML (col-lg-4/5/3) niet aangepast.     */
@media (min-width: 992px) {
    footer .row > .col-lg-4 { width: 25%; }
    footer .row > .col-lg-5 { width: 50%; }
}

.bp-footer-nav .navbar-nav {
    display: block;
    columns: 3 150px;
    column-gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-footer-nav .nav-item {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 28px 0;
    min-width: 0;
}

.bp-footer-nav .nav-link {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #ffffff !important;
    padding: 0 0 12px 0 !important;
    background: none !important;
}

/* Alleen de groepskoppen zijn dood; losse links (bv. CMS) blijven klikbaar. */
.bp-footer-nav .nav-link.dropdown-toggle {
    pointer-events: none;
}

.bp-footer-nav .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    list-style: none;
}

.bp-footer-nav .dropdown-item {
    display: block;
    font-size: 0.875rem;
    color: #c8dce8 !important;
    padding: 4px 0 !important;
    background: none !important;
    border-radius: 0 !important;
    /* lange labels breken af binnen de kolom i.p.v. eruit te lopen */
    white-space: normal !important;
    overflow-wrap: break-word;
}

.bp-footer-nav .dropdown-item:hover {
    color: #ffffff !important;
}

.bp-footer-nav .dropdown-toggle::after {
    display: none !important;
}

.bp-footer-nav .nav-item.activelink > a::after {
    display: none !important;
}

.bp-footer-nav li:has(> #b478) {
    display: none;
}

@media (max-width: 767px) {
    .bp-footer-nav .navbar-nav {
        columns: 1;
    }
}

/* ══════════════════════════════════════════════════════
   DARK MODE STIJLEN
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    /* ── Body en structuur ──────────────────────────── */
    body,
    header,
    section,
    main,
    footer.bg-dark,
    .footer {
        background-color: var(--bg) !important;
        color: var(--ink);
    }

    /* ── Footer ─────────────────────────────────────── */
    footer {
        background: #0a0a0a;
        color: #8fa8b8;
        border-top: 1px solid #1e1e1e;
    }

    footer h4,
    footer h6 {
        color: #ffffff;
    }

    footer a {
        color: #8fa8b8;
    }

    footer a:hover {
        color: #ffffff;
    }

    footer p {
        color: #8fa8b8;
    }

    footer .border-bottom,
    footer .border-secondary {
        border-color: #1e1e1e !important;
    }

    /* ── Bootstrap cards ────────────────────────────── */
    .card,
    .voice-card,
    .voice-section-container,
    .voice-card.mb-4 {
        background-color: #141414 !important;
        color: var(--ink) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }

    /* ── Tabellen ───────────────────────────────────── */
    td, th {
        color: var(--ink);
        border-color: var(--border-color);
    }

    /* ── List group ─────────────────────────────────── */
    .list-group-item {
        background-color: #141414 !important;
        color: var(--ink-mid) !important;
        border-color: var(--border-color) !important;
    }

    /* ── Navigatie ──────────────────────────────────── */
    .navbar-nav a.nav-link,
    .navbar-nav a.dropdown-item {
        background-color: #141414;
        color: var(--ink-mid) !important;
    }

    .nav-navbar a.nav-link:hover,
    .nav-navbar a.dropdown-item:hover,
    .nav-navbar .nav-item.activelink > a {
        background-color: #1e1e1e;
        color: var(--ink) !important;
    }

    /* ── Dropdown ───────────────────────────────────── */
    .dropdown-menu {
        background-color: #141414;
        border-color: var(--border-color);
    }

    .dropdown-item {
        color: var(--ink-mid);
    }

    /* ── Hamburger ──────────────────────────────────── */
    .navbar-toggler {
        border-color: var(--border-color) !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f0f2f4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* ── Dropdown pijltjes ──────────────────────────── */
    li.nav-item.dropdown > a::after,
    li.nav-item.dropdown:hover > a::after {
        border-top-color: var(--ink-mid);
    }

    /* ── Links ──────────────────────────────────────── */
    a:not(.btn) {
        /* knoppen uitgesloten: die houden hun eigen tekstkleur */
        color: var(--accent);
    }

    /* ── Titels ─────────────────────────────────────── */
    /* h1..h6 kleuren komen al uit de tokens in bp_new_subject.css
       (h1/h2=var(--ink), h3/h4/h5=var(--accent)); blanket-regel verwijderd */

    /* ── Bootstrap achtergrond overrides ────────────── */
    .bg-white,
    .bg-light {
        background-color: #141414 !important;
    }

    /* ── Formulieren ────────────────────────────────── */
    input, textarea, select {
        background-color: #1e1e1e !important;
        color: var(--ink) !important;
        border-color: var(--border-color) !important;
    }

    /* ── Foutmeldingen: leesbaar op donkere achtergrond ─
       Bootstrap .alert-danger / .invalid-feedback kregen in dark mode
       (donker)rode tekst op donker => te weinig contrast. Nu: lichte
       rode tekst op een subtiel donkerrood vlak. !important omdat de
       kleuren uit Bootstrap/bundle komen. */
    .alert-danger {
        background-color: rgba(192, 57, 43, 0.16) !important;
        border-color: rgba(220, 53, 69, 0.55) !important;
        color: #ffb3b3 !important;
    }
    .invalid-feedback {
        color: #ff8a8a !important;
    }

    /* ── Utilities ──────────────────────────────────── */
    .text-white  { color: #ffffff !important; }
    .text-muted  { color: var(--ink-soft) !important; }
    .border      { border-color: var(--border-color) !important; }
}

/* ── HOLLAND FONDS ──────────────────────────────────── */

/* Driekleur-strip helemaal bovenaan de pagina */
html.host-hollandfonds-nl body::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(
        to right,
        #AE1C28 0%,
        #AE1C28 33.33%,
        #ffffff 33.33%,
        #ffffff 66.66%,
        #21468B 66.66%,
        #21468B 100%
    );
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000000000;
}

/* Header iets naar beneden zodat de strip zichtbaar blijft */
html.host-hollandfonds-nl header {
    top: 3px;
}

/* Topbar krijgt logo-oranje */
html.host-hollandfonds-nl .topbar {
    background-color: #ec670c;
}

/* Topbar links blijven wit, dat is het al */

/* Dark mode: driekleur en oranje blijven gelijk — vlag is vlag */
/* end /common/bp_darkmode*/
/* ═══════════════════════════════════════════════════════
   BP_NEW.CSS — Burgerplatform
   BP-component systeem — herbruikbaar sitebreed
   + startpagina (.bp-home, onderaan dit bestand)
   Tokens en dark mode → bp_darkmode.css
   Layout en structuur → bp_new_subject.css
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   METRIC KLEUREN — extra tokens bovenop bp_darkmode.css
══════════════════════════════════════════════════════ */
:root {
    --bp-fin:     #c0392b;
    --bp-fin-lt:  #fdf0ef;
    --bp-soc:     #d68910;
    --bp-soc-lt:  #fef9ec;
    --bp-com:     #1a7ab5;
    --bp-com-lt:  #e8f2f9;
    --bp-esc:     #5d6d7e;
    --bp-esc-lt:  #f0f3f6;
    --radius:     6px;
    --radius-lg:  12px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.07);
    --shadow-md:  0 4px 16px rgba(0,0,0,.09);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bp-fin-lt:  #2a1210;
        --bp-soc-lt:  #2a1e08;
        --bp-com-lt:  #0d2a3d;
        --bp-esc-lt:  #1a2030;
    }
}

/* ══════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════ */

/* ── Navigatie ──────────────────────────────────────── */
.nav-link {
    font-weight: 500;
    color: var(--ink-mid);
}

/* .nav-link.active, .btn-primary(:hover), .btn-outline-custom en .topbar
   stonden hier dubbel. Ze staan nu alleen nog in bp_darkmode.css (basis-laag). */

/* ── Secties ────────────────────────────────────────── */
.hero-section {
    background: var(--bg);
    border-bottom: 1px solid var(--border-color);
    padding: 60px 0;
}

/* ── Reader layout ──────────────────────────────────── */
.container-reader {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* .pillar-card, .rekening-card en .signup-card stonden hier dubbel.
   Ze staan nu alleen nog in bp_darkmode.css (basis-laag). */

/* ══════════════════════════════════════════════════════
   BP-CARD COMPONENT
══════════════════════════════════════════════════════ */
.bp-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
    margin-bottom: 20px;
}

.bp-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.bp-card__head {
    padding: 28px 32px 24px;
    border-bottom: 1px solid var(--border-color);
}

.bp-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accent);
    background: var(--accent-lt);
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.bp-card__title {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25;
    color: var(--ink) !important;
    margin-bottom: 10px;
}

.bp-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.bp-card__title a:hover { color: var(--accent) !important; }

.bp-card__lead {
    font-size: 0.9375rem;
    line-height: 1.68;
    color: var(--ink-mid);
    max-width: 680px;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════
   BP-MISSION-HERO COMPONENT — Burgerplatform homepage
   Plak dit blok ONDERAAN in /common/bp_new.css
   Gebruikt bestaande tokens uit bp_darkmode.css:
     --accent, --accent-dk, --accent-lt
     --ink, --ink-mid, --ink-soft
     --bg, --surface, --border-color, --radius-lg
═══════════════════════════════════════════════════════ */

.bp-mission-hero {
    background: var(--bg);
    padding: 64px 0 56px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
}

.bp-mission-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.bp-mission-hero__eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}

.bp-mission-hero__title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}

.bp-mission-hero__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-mid);
    margin: 0 0 28px;
    max-width: 580px;
}

.bp-mission-hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.bp-mission-hero__ctas .btn {
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 600;
}

.bp-mission-hero__ctas .btn-primary {
    box-shadow: 0 6px 18px rgba(13, 92, 138, 0.25);
}

.bp-mission-hero__legal {
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    max-width: 580px;
}

.bp-mission-hero__legal .small {
    color: var(--ink-soft);
    margin: 0 0 10px;
    font-size: 0.85rem;
}

.bp-mission-hero__legal .small strong { color: var(--ink); }

/* ── ANBI-chip ──────────────────────────────────────── */
.bp-anbi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid #c79a3a;
    color: #6b4f12;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.bp-anbi-chip i {
    color: #c79a3a;
    font-size: 1rem;
}

@media (prefers-color-scheme: dark) {
    .bp-anbi-chip {
        background: rgba(199, 154, 58, 0.08);
        color: #e2c685;
        border-color: #c79a3a;
    }
}

/* ── Media (foto rechts) ────────────────────────────── */
.bp-mission-hero__media {
    position: relative;
}

.bp-mission-hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow:
        0 30px 60px -20px rgba(13, 92, 138, 0.35),
        0 8px 20px -8px rgba(0, 0, 0, 0.18);
    display: block;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 991px) {
    .bp-mission-hero {
        padding: 40px 0 36px;
    }
    .bp-mission-hero__media {
        margin-top: 24px;
    }
}

@media (max-width: 575px) {
    .bp-mission-hero__ctas .btn {
        width: 100%;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════
   BP-ROOT-CAUSE COMPONENT
══════════════════════════════════════════════════════ */
.bp-root-cause {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: rgba(192,57,43,.07);
    border-left: 3px solid var(--bp-fin);
    border-radius: 0 var(--radius) var(--radius) 0;
}

@media (prefers-color-scheme: dark) {
    .bp-root-cause { background: rgba(192,57,43,.12); }
}

.bp-root-cause__icon {
    font-size: 0.875rem;
    color: var(--bp-fin);
    flex-shrink: 0;
    margin-top: 2px;
}

.bp-root-cause__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bp-fin);
    margin-bottom: 3px;
}

.bp-root-cause__text {
    font-size: 0.875rem;
    color: var(--ink-mid);
    line-height: 1.55;
    margin: 0;
    font-style: italic;
}

.voice-wrapper {
    height: auto !important;
    overflow: visible !important;
}

/* ══════════════════════════════════════════════════════
   BP-METRICS COMPONENT
══════════════════════════════════════════════════════ */
.bp-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 767px) {
    .bp-metrics { grid-template-columns: repeat(2, 1fr); }
}

.bp-metric {
    padding: 22px 24px;
    border-right: 1px solid var(--border-color);
}

.bp-metric:last-child { border-right: none; }

@media (max-width: 767px) {
    .bp-metric:nth-child(2) { border-right: none; }
    .bp-metric:nth-child(3) { border-top: 1px solid var(--border-color); }
    .bp-metric:nth-child(4) { border-top: 1px solid var(--border-color); border-right: none; }
}

.bp-metric__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    margin-bottom: 12px;
}

.bp-metric__icon--fin { background: var(--bp-fin-lt); color: var(--bp-fin); }
.bp-metric__icon--soc { background: var(--bp-soc-lt); color: var(--bp-soc); }
.bp-metric__icon--com { background: var(--bp-com-lt); color: var(--bp-com); }
.bp-metric__icon--esc { background: var(--bp-esc-lt); color: var(--bp-esc); }

.bp-metric__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.bp-metric__value {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 10px;
}

.bp-metric__value--fin { color: var(--bp-fin); }
.bp-metric__value--soc { color: var(--bp-soc); }
.bp-metric__value--com { color: var(--bp-com); }
.bp-metric__value--esc { color: var(--bp-esc); }

.bp-metric__sub {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════
   BP-BAR COMPONENT
══════════════════════════════════════════════════════ */
.bp-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.bp-bar__fill { height: 100%; border-radius: 2px; }
.bp-bar__fill--fin { background: var(--bp-fin); }
.bp-bar__fill--soc { background: var(--bp-soc); }
.bp-bar__fill--com { background: var(--bp-com); }
.bp-bar__fill--esc { background: var(--bp-esc); }

.bp-metric__score {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 6px;
}

.bp-metric__score--soc { color: var(--bp-soc); }
.bp-metric__score--com { color: var(--bp-com); }
.bp-metric__score--esc { color: var(--bp-esc); }

/* ══════════════════════════════════════════════════════
   BP-PERSON COMPONENT
══════════════════════════════════════════════════════ */
.bp-person-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: opacity .15s;
}

.bp-person-item:last-child { border-bottom: none; }
.bp-person-item:hover { opacity: .8; }

.bp-person-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-lt);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.bp-person-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    display: block;
}

.bp-person-role {
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════
   BP-SORT-BTN COMPONENT
══════════════════════════════════════════════════════ */
.bp-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--ink-mid);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}

.bp-sort-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.bp-sort-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   BP-TAG COMPONENT
══════════════════════════════════════════════════════ */
.bp-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-lt);
    padding: 3px 10px;
    border-radius: 50px;
    margin: 3px 3px 3px 0;
    text-decoration: none;
    transition: all .15s;
}

.bp-tag:hover {
    background: var(--accent);
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   BP-NO-DATA COMPONENT
══════════════════════════════════════════════════════ */
.bp-no-data {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    padding: 4px 10px;
}

/* ══════════════════════════════════════════════════════
   BP-SHARE-BTN COMPONENT
   Pill-stijl share buttons voor in de footer
══════════════════════════════════════════════════════ */
.bp-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
 
.bp-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #c8dce8 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none !important;
    transition: all .15s;
}
 
.bp-share-btn:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}
 
.bp-share-btn i {
    font-size: 0.95rem;
}
 
/* Verberg de externe-link icon op share buttons (zou anders dubbel staan met target=_blank) */
.bp-share-btn::after {
    content: none !important;
}
 
/* Mobiel/tablet: alleen iconen tonen, label verbergen */
@media (max-width: 991px) {
    .bp-share-btn span {
        display: none;
    }
    .bp-share-btn {
        padding: 8px 12px;
    }
    .bp-share-btn i {
        font-size: 1.1rem;
    }
}

/* ══════════════════════════════════════════════════════
   ANALYSE LONGREAD — pagina's met #analyse op .maincontent-wrapped
   Bredere container + 8/4 kolomverdeling + sticky TOC
══════════════════════════════════════════════════════ */

/* Container-reader voor longread — 1200px ipv 1000px,
   geeft ruimte voor TOC ernaast */
#analyse.maincontent-wrapped .container-reader {
    max-width: 1200px !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Geneste Bootstrap .container niet laten knellen tot 1140px */
#analyse .container-reader .container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* Kolomverdeling: 8/4 ipv 9/3 zodat TOC-tekst niet afkapt */
@media (min-width: 768px) {
    #analyse .container-reader .row > .col-md-9 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    #analyse .container-reader .row > .col-md-3 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

/* Sticky TOC (was inline op de pagina, nu hier) */
#analyse .sticky-toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-left: 24px;
}

/* Mobiel: geen sticky, TOC valt netjes onder de tekst */
@media (max-width: 767px) {
    #analyse .sticky-toc {
        position: static;
        max-height: none;
        overflow: visible;
        padding-left: 0;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--border-color);
    }
}

/* ═══════════════════════════════════════════════════════
   BP-HOME — Startpagina Burgerplatform (voorheen inline .bph-*)
   Verplaatst uit de pagina-inhoud naar dit gedeelde bestand,
   zodat live en test identiek zijn zodra dit bestand laadt.
   Draait volledig op de tokens uit bp_darkmode.css — geen
   eigen --bph-* kleurenset meer, dus ook dark mode werkt mee.
   Klassennamen zijn zo gekozen dat ze NIET botsen met de
   bestaande .bp-card / .bp-anbi-chip (dat gaf eerder de
   "ingeklapte cijfers"): de landing-kaart heet .bp-home-card,
   de chip .bp-home-anbi-chip. Alles is gescoped onder .bp-home.
═══════════════════════════════════════════════════════ */

/* knoppen: tekst netjes gecentreerd, gelijke hoogte */
.bp-home .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;}

.bp-home .bp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-dk);}
.bp-home .bp-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);display:inline-block;}
.bp-home .bp-hero__title{font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--ink);font-size:clamp(1.9rem,4vw,3rem);}
.bp-home .bp-hero__lead{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--ink-soft);max-width:40em;}
/* rustiger: geen dikke blauwe tekst meer, alleen de groene check als accent */
.bp-home .bp-hero__note{font-weight:500;color:var(--ink-mid);}
.bp-home .bp-hero__note .bi{color:#1a9c5b;}
/* HERO-BEELD: grote vierkante foto, cover, midden-midden */
.bp-home .bp-hero__media{aspect-ratio:1/1;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 8px 30px rgba(15,25,35,.14);background:var(--bg);}
.bp-home .bp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;transition:opacity .16s ease;}
/* ingetogen trust-badge i.p.v. blauw-op-blauw: neutrale tekst, subtiele rand, geen vulling */
.bp-home .bp-home-anbi-chip{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;color:var(--ink-mid);background:transparent;border:1px solid var(--border-color);padding:6px 12px;border-radius:999px;}
.bp-home .bp-home-anbi-chip .bi{color:var(--ink-soft);}
.bp-home .btn-outline-custom{background:transparent;color:var(--accent);border:1.5px solid var(--border-color);}
.bp-home .btn-outline-custom:hover{border-color:var(--accent);background:var(--accent-lt);color:var(--accent-dk);}
.bp-home .bp-kpis{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}
.bp-home .bp-kpi__v{font-size:clamp(1.6rem,3vw,2rem);font-weight:700;color:var(--accent);line-height:1;}
.bp-home .bp-kpi__l{font-size:.9rem;color:var(--ink-soft);margin-top:6px;}
.bp-home .bp-section--grey{background:var(--bg);}
.bp-home .bp-section__intro h2{font-weight:700;color:var(--ink);}
.bp-home .bp-section__intro p{color:var(--ink-soft);max-width:46em;}
.bp-home .bp-pillar{background:var(--surface);border:1px solid var(--border-color);border-radius:8px;padding:26px;}
.bp-home .bp-pillar h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:10px;}
.bp-home .bp-pillar p{color:var(--ink-soft);}
/* split-beelden: ook vierkant cover voor consistentie */
.bp-home .bp-split__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:8px;box-shadow:0 4px 18px rgba(15,25,35,.1);display:block;}
.bp-home .bp-kicker{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--signal);margin-bottom:6px;}
.bp-home .bp-tlink{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.bp-home .bp-tlink:hover{color:var(--accent-dk);}
.bp-home .bp-tlink .bi{transition:transform .15s;}
.bp-home .bp-tlink:hover .bi{transform:translateX(3px);}
/* NIEUWS-RASTER: kaarten met padding rondom (ook boven de foto) */
.bp-home .bp-newsgrid .row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;}
.bp-home .bp-newsgrid .card{width:auto;height:100%;background:var(--surface);border:1px solid var(--border-color);border-radius:8px;padding:14px;box-shadow:0 4px 18px rgba(15,25,35,.06);}
.bp-home .bp-newsgrid .card-img-top{height:180px;width:100%;object-fit:cover;object-position:center;border-radius:6px;}
.bp-home .bp-newsgrid .card-body{padding:14px 6px 4px;}
.bp-home .bp-newsgrid .card-text{color:var(--ink-soft);font-size:.95rem;}
.bp-home .bp-newsgrid .card h3,.bp-home .bp-newsgrid .card h4{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.bp-home .bp-checklist li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;color:var(--ink);}
.bp-home .bp-checklist .bi{color:#1a9c5b;flex:none;margin-top:2px;}
.bp-home .bp-home-card{background:var(--surface);border:1px solid var(--border-color);border-radius:8px;padding:28px;box-shadow:0 4px 18px rgba(15,25,35,.06);}
.bp-home .bp-home-card h3{font-size:1.15rem;font-weight:700;margin-bottom:16px;color:var(--ink);}
.bp-home .bp-closing{background:var(--accent-dk);color:#fff;border-radius:20px;padding:clamp(28px,5vw,56px);}
.bp-home .bp-closing h2{color:#fff;font-weight:700;}
.bp-home .bp-closing p{color:rgba(255,255,255,.85);}
/* ===== RESPONSIVE ===== */
@media(max-width:991px){
  .bp-home .bp-newsgrid .row{grid-template-columns:repeat(2,1fr);}
  .bp-home .bp-hero__media{max-width:560px;margin-left:auto;margin-right:auto;}
}
@media(max-width:575px){
  .bp-home .bp-newsgrid .row{grid-template-columns:1fr;gap:18px;}
  .bp-home .bp-closing{text-align:center;}
  .bp-home .bp-closing .justify-content-lg-end{justify-content:center!important;}
}
/* end /common/bp_new*/
.voice-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    position: relative;
    width: 100%;
    /* De toevoeging voor JS-gestuurde hoogte */
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    align-items: start;
}

.voice-section-container {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
}

body[data-active-voice="Standard"] .voice-Standard,
body[data-active-voice="Analyst"] .voice-Analyst,
body[data-active-voice="Citizen"] .voice-Citizen,
body[data-active-voice="Innovator"] .voice-Innovator,
body[data-active-voice="Doer"] .voice-Doer {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1;
}

.voice-content {
    /* Geen grid-template-rows meer nodig, JS regelt de wrapper hoogte */
    display: block;
}

/* end /controllib/voicemanager/voicemanager*/