:root{--bg:#f3eee4;--card:#fffdf8;--blue:#123b6d;--text:#1f2933;--muted:#667085;--line:#ded4c5;--soft:#f8fafc;--red:#9b1c1c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.6}a{color:inherit}.tekst a,.kaart h2 a{text-decoration:none}.sitekop{background:linear-gradient(135deg,#123b6d,#1d5797);color:white;padding:26px 18px}.sitekop-inner{max-width:1180px;margin:auto;display:flex;gap:18px;justify-content:space-between;align-items:center}.logo{font-size:34px;font-weight:900;letter-spacing:.2px}.tagline{opacity:.92}.nav a{display:inline-block;color:white;text-decoration:none;border:1px solid rgba(255,255,255,.35);padding:8px 14px;border-radius:999px;margin-left:8px}.wrap{max-width:1180px;margin:24px auto;padding:0 16px}.zoekblok{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;grid-template-columns:1fr 260px auto;gap:12px;box-shadow:0 8px 24px rgba(18,59,109,.06)}input,select,button{font-size:16px;border:1px solid #ccd5e1;border-radius:14px;padding:12px;background:white}button{background:var(--blue);color:white;font-weight:bold;cursor:pointer}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}.kaart{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 24px rgba(18,59,109,.06)}.kaart img,.placeholder{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#d9e2ef}.placeholder{display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:bold}.kaart-body{padding:16px}.label{display:inline-block;background:#eef4ff;color:var(--blue);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:bold}.kaart h2{font-size:21px;line-height:1.25;margin:10px 0 6px}.meta{color:var(--muted);font-size:14px}.leesmeer{display:inline-block;margin-top:12px;background:var(--blue);color:white;text-decoration:none;padding:9px 14px;border-radius:999px;font-weight:bold}.leesmeer:hover{color:white}.kaartOpenForm{margin:0}.kaartOpenForm button.leesmeer{border:0;cursor:pointer}.artikel{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 8px 24px rgba(18,59,109,.06)}.hero img,.hero .placeholder{width:100%;max-height:620px;object-fit:cover}.artikel-body{max-width:860px;margin:auto;padding:26px 18px 36px}.artikel h1{font-size:42px;line-height:1.12;margin:10px 0}.plaats{font-weight:bold;color:var(--blue);text-transform:uppercase}.tekst{font-size:19px;text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-spacing:.02em}.tekst p{margin:0 0 18px;text-align:inherit}.bijschrift{font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:10px;padding-top:10px}.hero .video{margin:0;border-radius:0}.hero .vttLink,.hero .socialOnderMedia{max-width:860px;margin:12px auto}.video{margin:20px 0;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:16/9;width:100%;display:flex;align-items:center;justify-content:center}.video video{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;background:#000;display:block}.album{margin-top:24px}.fotogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.fotogrid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}.terug{display:inline-block;margin-bottom:16px;text-decoration:none;color:var(--blue);font-weight:bold}.align-links{text-align:left}.align-midden{text-align:center}.align-rechts{text-align:right}.align-uitvullen{text-align:justify}.kleur-rood{color:#9b1c1c}.kleur-blauw{color:#123b6d}.kleur-groen{color:#1f7a3f}.kleur-oranje{color:#b45309}.kleur-grijs{color:#667085}.kleur-zwart{color:#111827}.letter-klein{font-size:.88em}.letter-groot{font-size:1.18em}.letter-extra_groot{font-size:1.38em}.font-krant{font-family:Georgia,"Times New Roman",serif}.font-modern{font-family:Arial,Helvetica,sans-serif}.font-mono{font-family:Consolas,"Courier New",monospace}.inlinefoto img{width:100%;border-radius:18px}.witruimte{height:28px}.carrousel{position:relative}.cartrack{border-radius:16px}.carrousel.effect-slide .cartrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 42px 12px;scroll-behavior:smooth}.carrousel.effect-slide .carslide{min-width:100%;scroll-snap-align:center}.carslide{display:flex;align-items:center;justify-content:center;background:#eef2f7;border-radius:16px;overflow:hidden}.carslide img{width:100%;height:auto;max-height:72vh;object-fit:contain;border-radius:16px;display:block;transition:transform 6s ease}.carrousel.effect-fade .cartrack{position:relative;height:min(72vh,620px);overflow:hidden;background:#eef2f7}.carrousel.effect-fade .carslide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s ease}.carrousel.effect-fade .carslide.active{opacity:1;pointer-events:auto}.carrousel.effect-fade .carslide img{max-height:none;height:100%;object-fit:contain}.carrousel.zoom-aan .carslide.active img{transform:scale(var(--zoomscale,1.10))}.carbtn{position:absolute;top:45%;z-index:2;width:36px;height:36px;border-radius:999px;padding:0}.carbtn.prev{left:0}.carbtn.next{right:0}.onderelkaar img{width:100%;margin-bottom:14px;border-radius:16px}.leeg{background:white;border:1px solid var(--line);border-radius:20px;padding:24px;color:var(--muted)}
.paginering{display:flex;justify-content:center;align-items:center;gap:12px;margin:24px 0 10px;flex-wrap:wrap}.paginering a,.paginering span{background:#fffdf8;border:1px solid var(--line);border-radius:999px;padding:10px 16px;text-decoration:none;font-weight:800;color:var(--blue)}.paginering span{color:#667085}.terug-overzicht{display:inline-block;margin:0 0 16px;padding:10px 14px;background:#eef2f7;color:#123b6d;border:1px solid #d8e0ec;border-radius:999px;text-decoration:none;font-weight:800}
.reactieblok{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px}.reactieblok h2{margin-top:0;color:var(--blue)}.reactiekaart{background:#f8fafc;border:1px solid #d8e0ec;border-radius:16px;padding:14px;margin-top:12px}.reactieMeta{color:var(--muted);font-size:14px;font-weight:bold}.reactieForm{display:grid;gap:10px;margin-top:14px}.reactieForm textarea{min-height:130px;resize:vertical}.reactieMelding{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:14px;padding:12px;font-weight:bold}.reactieFout{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:14px;padding:12px;font-weight:bold}.reactieKeuze{display:grid;gap:8px;background:#f8fafc;border:1px solid #d8e0ec;border-radius:14px;padding:12px;color:#334155;font-weight:700}.reactieKeuze label{display:flex;gap:8px;align-items:center}.reactieKeuze input{width:auto}.reactieKnoppen{display:flex;gap:10px;flex-wrap:wrap}.knopAnnuleren{background:#eef2f7!important;color:#334155!important;border-color:#cbd5e1!important}
.hpveld{position:absolute;left:-9999px;opacity:0}
footer{max-width:1180px;margin:40px auto 20px;padding:0 16px;color:var(--muted);font-size:14px}@media(max-width:900px){.sitekop-inner{display:block}.nav{margin-top:12px}.zoekblok{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.artikel h1{font-size:32px}}@media(max-width:620px){.grid,.fotogrid{grid-template-columns:1fr}.logo{font-size:28px}.artikel h1{font-size:27px}}
.tekst a{
    color:#2b4f7a;
    text-decoration:none;
}

.tekst a:hover{
    color:#123b6d;
}

.socialOnderMedia{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin:10px 0 22px;
    padding:10px 12px;
    border:1px solid #d8e0ec;
    border-radius:16px;
    background:#f8fafc;
    color:#334155;
    font-size:14px;
    font-weight:700;

}
.socialOnderMedia span{
    color:#667085;
}
.socialOnderMedia a{
    display:inline-block;
    text-decoration:none;
    background:#eef4ff;
    color:#123b6d;
    border:1px solid #d5e4f8;
    padding:7px 11px;
    border-radius:999px;
    font-weight:800;
}
.mediaDelenDirect{
    padding-top:14px!important;
    padding-bottom:0!important;
}
.makersOnderArtikel{
    margin-top:28px;
    padding-top:16px;
    border-top:1px solid var(--line);
    color:#475467;
    font-size:15px;
}
.makersOnderArtikel h2{
    margin:0 0 8px;
    color:var(--blue);
    font-size:20px;
}
.makersOnderArtikel ul{
    margin:0;
    padding-left:18px;
}
.makersOnderArtikel li{
    margin:3px 0;
}

/* Video-label: alleen kenbaar maken dat artikel video heeft */
.videoBadge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:#b91c1c;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.2px;
    text-transform:uppercase;
    line-height:1;
}
.videoBadgeKlein{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:3;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.kaartMediaWrap{
    position:relative;
}
.artikelVideoKenmerk{
    margin:10px 0 0;
}

/* Nieuwe automatische header / slider bovenaan */
.autoHeader{
    position:relative;
    width:100%;
    overflow:hidden;
    margin:0;
    padding:0;
    background:#e8eef5;
}
.autoHeaderFoto{
    display:block;
    width:100%;
    height:auto;
}
.autoHeaderMenu{
    position:absolute;
    left:18px;
    bottom:13px;
    z-index:3;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    max-width:calc(100% - 36px);
}
.header-link{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.25);
    color:#ffffff;
    text-decoration:none;
    font-weight:800;
    border-radius:20px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    transition:all .25s ease;
    text-shadow:0 1px 5px rgba(0,0,0,.28);
}
.header-link:hover{
    background:rgba(255,255,255,0.22);
    border-color:rgba(255,255,255,0.55);
    color:#ffffff;
    transform:translateY(-1px);
}
.header-link:active{transform:translateY(0)}

/* Mobiele navigatieknoppen bij artikelen */
.terug-mobiel,
.artikelMobielNav{
    display:none;
}
.artikelMobielNav{
    gap:10px;
    flex-wrap:wrap;
    padding:0 18px 24px;
    max-width:860px;
    margin:0 auto;
}
.mobielKnop{
    display:inline-block;
    padding:10px 14px;
    background:#eef2f7;
    color:#123b6d;
    border:1px solid #d8e0ec;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
}

/* Pijl terug naar boven */
#naarBoven{
    position:fixed;
    right:15px;
    bottom:15px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(18,59,109,.72);
    color:#fff;
    border-radius:50%;
    text-decoration:none;
    font-size:22px;
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
    z-index:9999;
    box-shadow:0 8px 24px rgba(0,0,0,.20);
}
#naarBoven.zichtbaar{
    opacity:1;
    visibility:visible;
}
#naarBoven:hover{
    background:rgba(18,59,109,.92);
}

@media(max-width:1024px){
    .terug-mobiel{
        display:inline-block;
        margin:0 0 14px;
        padding:10px 14px;
        background:#eef2f7;
        color:#123b6d;
        border:1px solid #d8e0ec;
        border-radius:999px;
        text-decoration:none;
        font-weight:800;
    }
    .artikelMobielNav{
        display:flex;
    }
}
@media(max-width:700px){
    .autoHeaderMenu{
        left:10px;
        bottom:8px;
        gap:6px;
    }
    .header-link{
        padding:6px 11px;
        font-size:14px;
        border-radius:18px;
    }
    #naarBoven{
        width:40px;
        height:40px;
        right:12px;
        bottom:12px;
    }
}


.opmerkingblok{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.opmerkingblok h2{margin:0 0 6px;color:var(--blue);font-size:22px}
.opmerkingblok p{margin:0 0 14px;color:#667085;font-size:15px}
.opmerkingForm{display:grid;gap:9px}
.opmerkingForm label{font-weight:800;color:#334155;margin-top:4px}
.opmerkingForm textarea{min-height:120px;resize:vertical}
.opmerkingForm button{justify-self:start;min-width:130px}
.opmerkingForm button.is-bezig{background:#e5e7eb;color:#475467;cursor:wait}
.opmerkingMelding{display:block;margin:8px 0 12px;padding:9px 12px;border-radius:12px;background:#eef4ff;color:#123b6d;border:1px solid #d5e4f8;font-weight:800;font-size:14px}
.opmerkingMelding[hidden]{display:none}.opmerkingMelding.ok{background:#dcfce7;color:#166534;border-color:#bbf7d0}.opmerkingMelding.fout{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.opmerkingFoutVeld{border-color:#f59e0b!important;background:#fffbeb!important}
.deelKopieer{display:inline-block;text-decoration:none;background:#eef4ff;color:#123b6d;border:1px solid #d5e4f8;padding:7px 11px;border-radius:999px;font-weight:800;cursor:pointer}
.deelKopieer.gekopieerd{background:#dcfce7;color:#166534;border-color:#bbf7d0}


.leesDitOokPubliek{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.leesDitOokPubliek h2{margin:0 0 10px;color:var(--blue);font-size:22px}
.leesDitOokPubliek ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.leesDitOokPubliek li{background:#f8fafc;border:1px solid #d8e0ec;border-radius:16px;padding:0;overflow:hidden}
.leesDitOokPubliek li:hover{background:#eef4ff;border-color:#bcd4f0}
.leesDitOokKaart{display:grid!important;grid-template-columns:112px 1fr;gap:12px;align-items:center;color:#123b6d;text-decoration:none;font-weight:900;line-height:1.3;min-height:76px}
.leesDitOokKaart img{width:112px;height:76px;object-fit:cover;display:block;background:#d9e2ef}
.leesDitOokGeenFoto{width:112px;height:76px;display:flex;align-items:center;justify-content:center;background:#d9e2ef;color:#123b6d;font-size:12px;font-weight:800}
.leesDitOokTekst{display:block;padding:10px 12px 10px 0}
.leesDitOokTekst strong{display:block;color:#123b6d;font-weight:900}
.leesDitOokTekst small{display:block;color:#667085;margin-top:3px;font-size:13px;font-weight:700}
@media(max-width:620px){.leesDitOokKaart{grid-template-columns:92px 1fr}.leesDitOokKaart img,.leesDitOokGeenFoto{width:92px;height:66px}}

.audioBlok{margin:22px 0;padding:18px;background:#f7fbff;border:1px solid #dbe7f5;border-radius:18px}
.audioBlok h2{margin:0 0 12px;color:#123b6d}
.vttLink{margin:12px 0;padding:12px 14px;background:#fffdf8;border:1px solid #eadbbf;border-radius:14px;font-weight:800}
.vttLink a{color:#003b95}

.txtIntro{
    background:#ffffff;
    border:1px solid #d8e3f0;
    border-radius:18px;
    padding:22px 26px;
    margin:24px 0;
    line-height:1.7;
    font-size:18px;
}
.txtIntro p{ margin:0 0 14px 0; }


/* =========================================================
   HBS 2026-07-12 - warme, sfeervolle artikelpagina
   De werking blijft gelijk; alleen presentatie en plaatsing
   van de video zijn aangepast.
========================================================= */
body{
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 38%),
        #f3eee4;
    color:#2d2924;
}
.wrap{max-width:1100px;margin:22px auto 42px}
.artikel{
    max-width:900px;
    margin:0 auto;
    background:#fffdf8;
    border:1px solid #d9cbb8;
    border-radius:18px;
    box-shadow:0 14px 38px rgba(78,58,33,.10);
}
.hero.hoofdfoto{
    padding:14px 14px 0;
    background:#fffdf8;
}
.hero.hoofdfoto img{
    width:100%;
    aspect-ratio:16/9;
    max-height:none;
    object-fit:cover;
    border-radius:13px;
    border:1px solid #e5dacb;
}
.artikel-body{
    max-width:760px;
    padding:30px 28px 42px;
}
.artikel .label{
    background:#f2e7d4;
    color:#704d24;
    border:1px solid #e4d2b5;
    letter-spacing:.03em;
}
.artikel h1{
    font-family:Georgia,"Times New Roman",serif;
    color:#173b65;
    font-size:40px;
    line-height:1.12;
    margin:13px 0 10px;
    letter-spacing:-.015em;
}
.artikel .meta{
    padding-bottom:17px;
    margin-bottom:22px;
    border-bottom:1px solid #e7ddcf;
}
.tekst{
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    line-height:1.78;
}
.tekst p{margin:0 0 20px}
.tekst h2,
.videoInArtikel h2,
.album h2,
.makersOnderArtikel h2,
.opmerkingblok h2{
    font-family:Georgia,"Times New Roman",serif;
    color:#173b65;
}
.txtIntro{
    background:#f8f1e6;
    border:1px solid #e6d7c2;
    border-left:5px solid #b58a52;
    border-radius:12px;
    padding:19px 22px;
    margin:23px 0 27px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
}
.videoInArtikel{
    margin:30px 0 34px;
    padding:18px;
    background:#f5eee3;
    border:1px solid #e2d4c0;
    border-radius:16px;
}
.videoInArtikel h2{
    margin:0 0 12px;
    font-size:22px;
}
.videoInArtikel .video{
    margin:0;
    border-radius:12px;
    box-shadow:0 8px 22px rgba(28,31,35,.16);
}
.videoInArtikel .socialOnderMedia{
    margin:12px 0 0;
    background:#fffaf2;
    border-color:#e4d7c5;
}
.album{
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid #e7ddcf;
}
.carrousel,
.onderelkaar{
    background:#f7f1e8;
    border:1px solid #e5d8c6;
    border-radius:16px;
    padding:12px;
}
.makersOnderArtikel,
.opmerkingblok,
.leesDitOokPubliek{
    margin-top:34px;
    padding-top:22px;
    border-top:1px solid #dfd1be;
}
.terug-overzicht{
    display:block;
    max-width:900px;
    margin:0 auto 13px;
    color:#173b65;
    font-weight:800;
    text-decoration:none;
}
input,select,textarea,button{
    border-radius:10px;
}
.opmerkingForm input,
.opmerkingForm textarea{
    background:#fffefa;
    border-color:#d9cbb8;
}
footer{max-width:900px}
@media(max-width:700px){
    .wrap{padding:0 9px;margin-top:12px}
    .artikel{border-radius:13px}
    .hero.hoofdfoto{padding:8px 8px 0}
    .hero.hoofdfoto img{border-radius:9px}
    .artikel-body{padding:23px 18px 32px}
    .artikel h1{font-size:30px}
    .tekst,.txtIntro{font-size:17px}
    .videoInArtikel{margin:24px -2px 28px;padding:12px}
}


/* Rustige fotocarrousel zonder titel of lichtblauwe vlakken */
.album{margin-top:34px;padding-top:18px;border-top:1px solid #e7ddcf}
.album>h2{display:none}
.carrousel{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.carrousel .cartrack{background:#fffdfa;border:1px solid #e5d8c6;border-radius:16px;overflow:hidden}
.carrousel.effect-fade .cartrack{height:auto;aspect-ratio:16/9;background:#fffdfa}
.carrousel.effect-fade .carslide{background:transparent;border-radius:0}
.carrousel.effect-fade .carslide img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
.carrousel.effect-slide .cartrack{background:#fffdfa;border:1px solid #e5d8c6;padding:0;gap:0}
.carrousel.effect-slide .carslide{min-width:100%;background:transparent;border-radius:0;aspect-ratio:16/9}
.carrousel.effect-slide .carslide img{width:100%;height:100%;object-fit:contain;border-radius:0}
.carbtn{top:calc((100% - 92px)/2);width:42px;height:42px;background:#064784;border:2px solid #fff;color:#fff;font-size:28px;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.carbtn.prev{left:-12px}.carbtn.next{right:-12px}
.carthumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 2px;scrollbar-width:thin}
.carthumb{flex:0 0 112px;padding:0;border:2px solid transparent;border-radius:10px;background:transparent;overflow:hidden;cursor:pointer}
.carthumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
.carthumb.active{border-color:#064784}
.carthumb:focus-visible{outline:3px solid rgba(6,71,132,.28);outline-offset:2px}
@media(max-width:700px){
  .carrousel.effect-fade .cartrack,.carrousel.effect-slide .carslide{aspect-ratio:4/3}
  .carbtn{top:calc((100% - 78px)/2);width:38px;height:38px}
  .carbtn.prev{left:-7px}.carbtn.next{right:-7px}
  .carthumb{flex-basis:88px}
}


/* HBS: alle geschreven TXT-introtekst links en rechts uitvullen.
   Deze regels staan bewust onder .align-links en winnen daarom altijd. */
.txtIntro,
.txtIntro p,
.txtIntro p.align-links,
.txtIntro p.align-uitvullen{
    text-align:justify !important;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    overflow-wrap:break-word;
    word-break:normal;
}
.txtIntro{
    line-height:1.75;
}
.txtIntro p,
.txtIntro p.align-links,
.txtIntro p.align-uitvullen{
    margin:0 0 18px;
}
.txtIntro p:last-child{
    margin-bottom:0;
}