/* =====================================================
   HOEMBEKA VZW — Responsieve stijl
   Archiefboek (inkt-groen) · perkament · verweerd brons
   =====================================================
*/
:root{
  --inkt-1: #16211d;
  --inkt-2: #223129;
  --inkt-3: #2d4136;
  --perkament: #efe7d3;
  --perkament-licht: #f8f3e6;
  --brons: #b28a3e;
  --brons-licht: #d9b978;
  --roest: #9c5233;
  --blauw: #00238C;
  --geel: #666600;
  --tekst-donker: #221c14;
  --tekst-licht: #f6f1e2;
  --lijn: rgba(178,138,62,.35);
  --schaduw: 0 18px 40px -22px rgba(16,20,14,.55);
  --radius: 9px;
  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}
/* Achtergrondfoto: WebP (klein) met JPG-terugval; kleinere versie op smalle schermen */
:root{ --foto:url('../afbeelding/archief-1920.jpg'); }
@supports (background-image:image-set(url('a.webp') type('image/webp'))){
:root{ --foto:image-set(url('../afbeelding/archief-1920.webp') type('image/webp'), url('../afbeelding/archief-1920.jpg') type('image/jpeg')); }
}
@media (max-width:900px){
:root{ --foto:url('../afbeelding/archief-1000.jpg'); }
@supports (background-image:image-set(url('a.webp') type('image/webp'))){
:root{ --foto:image-set(url('../afbeelding/archief-1000.webp') type('image/webp'), url('../afbeelding/archief-1000.jpg') type('image/jpeg')); }
}
}
*,*::before,*::after{ box-sizing:border-box; }
button{ font:inherit; color:inherit; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
margin:0;
font-family:var(--sans);
color:var(--tekst-donker);
background:var(--perkament-licht);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:var(--serif);
font-weight:600;
line-height:1.12;
margin:0 0 .5em;
color:var(--inkt-1);
letter-spacing:.2px;
}
h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:600; }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:600; }
h4{ font-size:1.05rem; }
p{ margin:0 0 1em; }
a{ color:inherit; }
img{ max-width:100%; height:auto; display:inline-block; }
.img-responsive{ max-width:100%; height:auto; border-radius:2px; }
sup{ line-height:0; }
.svg-ico{ width:1em; height:1em; display:inline-block; }
.svg-ico svg{ width:150%; height:150%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Focus-zichtbaarheid */
a:focus-visible, button:focus-visible, dialog:focus-visible{
outline:2px solid var(--brons); outline-offset:2px;
}
.skip-link{
position:absolute; left:-999px; top:0; background:var(--inkt-1); color:var(--tekst-licht);
padding:.7em 1.2em; z-index:999; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }
/* ================================================================
   Video-achtergrond (bestaande decoratieve laag houden, subtieler)
   ================================================================
*/
video.video{
position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
z-index:-3; opacity:.08; filter:grayscale(.3);
}
.ocean,.light{ display:none; } /* vervangen door rustiger, moderne achtergrond */

/* ===================
   Topbalk / Navigatie
   ===================
*/
.topbar{
position:sticky; top:0; z-index:60;
display:flex; align-items:center; justify-content:space-between;
gap:1rem; padding:.7rem 1.4rem;
background:rgba(29,39,99,.92);
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(217,185,120,.25);
}
.topbar .merk{
display:flex; align-items:center; gap:.65rem;
color:var(--tekst-licht); text-decoration:none;
}
.topbar .merk img{ width:38px; height:37px; }
.topbar .merk-tekst{ font-family:var(--serif); font-size:1.18rem; font-weight:600; letter-spacing:.3px; }
.topbar .merk-tekst small{ display:block; font-family:var(--sans); font-size:.62rem; font-weight:500; letter-spacing:1.5px; color:var(--brons-licht); text-transform:uppercase; }
.topbar-acties{ display:flex; align-items:center; gap:.6rem; }
.knop-raadpleeg{
display:inline-flex; align-items:center; gap:.4rem;
background:var(--brons); color:var(--inkt-1); font-weight:600;
padding:.5rem .9rem; border-radius:2px; text-decoration:none; font-size:.85rem;
transition:background .15s ease;
}
.knop-raadpleeg:hover{ background:var(--brons-licht); }
.knop-raadpleeg .svg-ico{ width:1.05em; height:1.05em; }
.menu-toggle{
display:inline-flex; align-items:center; gap:.5rem;
background:transparent; border:1px solid rgba(217,185,120,.4); color:var(--tekst-licht);
padding:.5rem .8rem; border-radius:2px; cursor:pointer; font:inherit; font-size:.85rem; font-weight:500;
}
.menu-toggle .svg-ico{ width:1.15em; height:1.15em; }
.menu-toggle:hover{ border-color:var(--brons-licht); }
/* Volledige schermnavigatie (overlay) */
.site-nav{
position:fixed; inset:0; z-index:80;
background:
linear-gradient(160deg, rgba(15,20,16,.82), rgba(24,36,30,.7) 130%),
var(--foto) center / cover no-repeat,
var(--inkt-1);
color:var(--tekst-licht);
display:flex; flex-direction:column;
transform:translateY(-8px); opacity:0; visibility:hidden;
transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
overflow-y:auto;
}
.site-nav.open{
opacity:1; visibility:visible; transform:translateY(0);
transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.site-nav-top{
display:flex; justify-content:space-between; align-items:center;
padding:.9rem 1.4rem; border-bottom:1px solid rgba(217,185,120,.2);
}
.site-nav-top .merk-tekst{ font-family:var(--serif); font-size:1.1rem; }
.site-nav-close{
background:transparent; border:1px solid rgba(217,185,120,.4); color:var(--tekst-licht);
width:2.3rem; height:2.3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.site-nav-close .svg-ico{ width:1.5rem; height:1.5rem; display:block; }
.site-nav-close .svg-ico svg, .site-nav-groep a .svg-ico svg{ width:100%; height:100%; display:block; }
.site-nav-body{
flex:1; display:grid; gap:2.2rem;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
padding:2.2rem 1.4rem 3rem; max-width:1180px; margin:0 auto; width:100%;
}
.site-nav-voet{
width:calc(100% - 2.8rem); max-width:calc(1180px - 2.8rem); margin:0 auto; padding:1rem 0 calc(1.4rem + env(safe-area-inset-bottom,0px));
border-top:1px solid rgba(217,185,120,.18); font-size:.72rem; color:#a79f8a;
}
.site-nav-voet p{ margin:0 0 .5rem; }
.site-nav-voet p:last-child{ margin-bottom:0; }
.site-nav-groep h4{
color:var(--brons-licht); font-family:var(--sans); text-transform:uppercase;
font-size:.72rem; letter-spacing:1.6px; font-weight:600; margin-bottom:1rem;
}
.site-nav-groep ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.site-nav-groep a{
text-decoration:none; color:var(--tekst-licht); font-family:var(--serif); font-size:1.2rem;
display:inline-flex; align-items:center; gap:.5rem; border-bottom:1px solid transparent;
}
.site-nav-groep a:hover{ color:var(--brons-licht); border-color:var(--brons-licht); }
.site-nav-groep a .svg-ico{ color:var(--brons); width:1.5rem; height:1.5rem; flex:none; display:block; }
/* ======================================================================
   Eén-scherm-opbouw: beeldscherm > topbar + shell(hero-pane, grid-pane)
   Mobiel = gewoon een doorlopende, scrollende pagina (regels hieronder).
   Vanaf een laptop/desktopformaat wordt dit een niet-scrollend scherm
   (zie het media-query-blok verderop in dit bestand).
   ======================================================================
*/
.beeldscherm{ display:block; }
.shell{ display:block; }
/* -------- Hero-paneel -------- */
.hero-pane{
position:relative; min-height:92vh; display:flex; align-items:flex-end;
overflow:hidden; color:var(--tekst-licht); isolation:isolate;
}
.hero-pane video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hero-pane::after{
content:""; position:absolute; inset:0; z-index:-1;
background:
linear-gradient(0deg, rgba(15,20,16,.94) 0%, rgba(15,20,16,.55) 42%, rgba(15,20,16,.35) 65%, rgba(15,20,16,.72) 100%);
}
.hero-inhoud{
position:relative; width:100%; max-width:640px; margin:0;
padding:6.5rem 1.4rem 3rem;
}
.hero-badge{
display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; letter-spacing:1.5px;
text-transform:uppercase; color:var(--brons-licht); border:1px solid rgba(217,185,120,.45);
padding:.4rem .85rem; border-radius:999px; margin-bottom:1.2rem;
}
.hero-pane h1{
color:var(--tekst-licht); font-size:clamp(2.1rem,5.4vw,3.4rem); margin-bottom:.32em;
max-width:15ch;
}
.hero-pane h1 em{ font-style:italic; color:var(--brons-licht); }
.hero-pane p.lead{
font-size:clamp(.98rem,1.5vw,1.12rem); max-width:46ch; color:#e7e1cf; margin-bottom:1.6rem;
font-weight:400;
}
.hero-acties{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem; }
.btn{
display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:500;
padding:.78rem 1.25rem; border-radius:2px; font-size:.92rem; border:1px solid transparent;
transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primair{ background:var(--brons); color:var(--inkt-1); }
.btn-primair:hover{ background:var(--brons-licht); }
.btn-buiten{ border-color:rgba(246,241,226,.55); color:var(--tekst-licht); background:rgba(60,24,22,.8); }
.btn-buiten:hover{ border-color:var(--tekst-licht); background:rgba(25,99,100,.5); }

.hero-feiten{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.2rem; padding-top:1.3rem; border-top:1px solid rgba(217,185,120,.28);
  max-width:520px;
}
.hero-feit b{ display:block; font-family:var(--serif); font-size:1.28rem; color:var(--brons-licht); }
.hero-feit span{ font-size:.78rem; color:#cfc8b3; }

.hero-mini-links{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.3rem; }
.hero-mini-links a{
  color:var(--brons-licht); text-decoration:none; font-size:.84rem; display:inline-flex; align-items:center;
  border-bottom:1px solid rgba(217,185,120,.4); padding-bottom:.15rem;
}
.hero-mini-links a:hover{ color:var(--tekst-licht); border-color:var(--tekst-licht); }
.hero-voet{
  margin:1.6rem 0 0; padding-top:1rem; border-top:1px solid rgba(217,185,120,.18);
  font-size:.72rem; color:#a79f8a;
}

/* -------- Grid-paneel (deelvensters) -------- */
.grid-pane{ max-width:1180px; margin:0 auto; padding:3.4rem 1.4rem 2.4rem; }
.sectie-kop{ max-width:640px; margin-bottom:1.8rem; }
.sectie-kop .eyebrow{
  display:block; font-size:.78rem; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--roest); margin-bottom:.5rem; font-weight:600;
}
.sectie-kop h2{ margin:0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}

.grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:1fr;
}
.dv-card{
  position:relative; grid-column:span 2; min-height:230px;
  background:var(--inkt-2); color:var(--tekst-licht);
  border-radius:var(--radius); overflow:hidden; text-decoration:none;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem;
  border:1px solid rgba(217,185,120,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dv-card:hover{ transform:translateY(-3px); box-shadow:var(--schaduw); border-color:var(--brons); }
.dv-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(140% 110% at 15% 0%, rgba(178,138,62,.28), transparent 60%);
  opacity:.9; transition:opacity .18s ease;
}
.dv-card:hover::before{ opacity:1; }
.dv-card .ico{
  width:2.5rem; height:2.5rem; color:var(--brons-licht); margin-bottom:1rem; position:relative;
}
.dv-card h3{ color:var(--tekst-licht); position:relative; margin-bottom:.35em; font-size:1.28rem; }
.dv-card p{ position:relative; color:#d6d0bd; font-size:.9rem; margin-bottom:.7rem; }
.dv-card .naar{
  position:relative; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem;
  font-weight:600; color:var(--brons-licht); letter-spacing:.3px;
}
.dv-card .naar .svg-ico{ width:1em; height:1em; transition:transform .15s ease; }
.dv-card:hover .naar .svg-ico{ transform:translateX(3px); }

.dv-groot{ grid-column:span 3; min-height:300px; background:linear-gradient(135deg,var(--blauw),#743a22); }
.dv-klein{ grid-column:span 2; min-height:190px; background:linear-gradient(135deg,var(--geel),#743a22);}
.dv-extern{ background:linear-gradient(135deg,var(--roest),#743a22); }

@media (max-width:980px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .dv-card, .dv-groot, .dv-klein{ grid-column:span 1; min-height:210px; }
  .intro-wrap{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   Panelen — de volledige inhoud van elk deelvenster, als grote dialoog
   (in plaats van een doorlopende, te scrollen pagina-sectie)
   ========================================================================= */
.sectie.donker{ background:var(--inkt-1); color:var(--tekst-licht); }
.sectie.donker h2, .sectie.donker h3, .sectie.donker h4{ color:var(--tekst-licht); }
.sectie.licht{ background:var(--perkament-licht); }
.sectie.perkament{ background:var(--perkament); }

dialog.paneel-dialog{
  border:none; padding:0; border-radius:var(--radius); overflow:hidden;
  width:min(1080px,94vw); max-height:min(86vh,860px); height:auto;
  box-shadow:0 44px 90px -24px rgba(0,0,0,.6);
  color:var(--tekst-donker);
}
/* Belangrijk: alleen flex-layout geven zodra de dialoog echt open is —
   anders overschrijft dit de standaard "verborgen tenzij [open]"-regel
   van <dialog> en blijven alle 14 panelen onzichtbaar-maar-aanwezig. */
dialog.paneel-dialog[open]{ display:flex; flex-direction:column; }
dialog.paneel-dialog::backdrop{ background:rgba(10,14,11,.78); backdrop-filter:blur(3px); }

.paneel-kop{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.7rem; flex:none; border-bottom:1px solid var(--lijn);
}
.sectie.donker .paneel-kop{ border-color:rgba(217,185,120,.22); }
.paneel-kop-links{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.paneel-kop-links .ico{
  flex:none; width:2.5rem; height:2.5rem; color:var(--brons);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--lijn); border-radius:50%;
}
.paneel-kop-links .ico .svg-ico{ width:1.6rem; height:1.6rem; display:block; }
.paneel-kop-links .ico .svg-ico svg, .paneel-sluit .svg-ico svg{ width:100%; height:100%; display:block; }
.sectie.donker .paneel-kop-links .ico{ border-color:rgba(217,185,120,.4); }
.paneel-kop-links h2{ margin:0; font-size:1.3rem; }
.paneel-sluit{
  flex:none; background:transparent; border:1px solid var(--lijn); cursor:pointer;
  width:2.2rem; height:2.2rem; border-radius:50%; color:inherit;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.sectie.donker .paneel-sluit{ border-color:rgba(217,185,120,.4); }
.paneel-sluit .svg-ico{ width:1.4rem; height:1.4rem; display:block; }
.paneel-sluit:hover{ border-color:var(--brons); color:var(--brons); }

.paneel-lijf{
  max-width:820px; min-width:0; width:100%; margin:0 auto; overflow-x:hidden;
  overflow-y:auto; padding:1.8rem 1.8rem 2.6rem; -webkit-overflow-scrolling:touch;
}
.paneel-lijf.breed{ max-width:none; }
.sectie-lead{ font-size:1.04rem; color:#4b463a; max-width:62ch; margin-bottom:1.7rem; }
.sectie.donker .sectie-lead{ color:#cfc8b3; }

@media (max-width:700px){
  dialog.paneel-dialog[open]{
    position:fixed; inset:0; margin:0;
    width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0;
  }
}

/* =========================================================================
   Compatibiliteit: klassen uit de gemigreerde (legacy) inhoud
   ========================================================================= */
.legacy{ font-size:1rem; line-height:1.72; }
.legacy p{ margin:0 0 1.1em; }
.legacy h3{ margin-top:1.6em; }
.legacy h4.links, .legacy h4{ color:var(--roest); margin-top:1.7em; }
.legacy nav.cl-effect-1{ display:block; margin:.6rem 0 1rem; line-height:2; }
.legacy nav.cl-effect-1 a{ text-decoration:none; color:var(--inkt-2); border-bottom:1px dotted var(--lijn); }
.sectie.donker .legacy nav.cl-effect-1 a{ color:var(--tekst-licht); }
.legacy nav.cl-effect-1 a:hover{ color:var(--roest); border-color:var(--roest); }
.legacy a.a1, .legacy a.a2{
  color:var(--roest); text-decoration:none; font-weight:600; border-bottom:1px solid var(--lijn);
}
.sectie.donker .legacy a.a1, .sectie.donker .legacy a.a2{ color:var(--brons-licht); }
.legacy a.a1:hover, .legacy a.a2:hover{ border-color:currentColor; }
.legacy .center{ text-align:center; }
.legacy .midden{ display:block; margin:1.2rem auto; box-shadow:var(--schaduw); }
.legacy .foto-met-schaduw{ box-shadow:var(--schaduw); margin:1rem 0; }
.legacy .blink{ animation:zacht-knipperen 2.6s ease-in-out infinite; }
@keyframes zacht-knipperen{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.legacy sup{ color:var(--brons); }

/* stijl1..stijl11 typografische varianten uit de oude site */
.legacy .stijl1{ color:var(--roest); }
.legacy .stijl1b{ color:var(--brons); font-style:italic; }
.legacy .stijl2{ color:var(--inkt-2); font-weight:600; }
.sectie.donker .legacy .stijl2{ color:var(--roest); }
.legacy .stijl3, .legacy .stijl3b{ color:var(--roest); font-weight:600; }
.legacy .stijl4{ color:#6b6152; font-style:italic; font-size:.95rem; }
.sectie.donker .legacy .stijl4{ color:#b9b29d; }
.legacy .stijl5{ display:block; font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--inkt-2); border-left:3px solid var(--brons); padding-left:1rem; margin:1rem 0; }
.sectie.donker .legacy .stijl5{ color:var(--tekst-licht); }
.legacy .stijl6{ color:#55503f; }
.sectie.donker .legacy .stijl6{ color:#cfc8b3; }
.legacy .stijl6b{ color:var(--brons); font-size:.92rem; }
.legacy .stijl7{ color:var(--tekst-donker); }
.sectie.donker .legacy .stijl7{ color:var(--tekst-licht); }
.legacy .stijl7b, .legacy .stijl7d{ color:var(--inkt-2); font-family:var(--serif); font-size:1.1rem; }
.sectie.donker .legacy .stijl7b, .sectie.donker .legacy .stijl7d{ color:var(--brons-licht); }
.legacy .stijl8, .legacy .stijl8c{ color:var(--roest); font-weight:600; }
.legacy .stijl9, .legacy .stijl9b, .legacy .stijl9c, .legacy .stijl9d{ color:var(--brons); font-weight:600; }
.legacy .stijl10{ color:#948c78; font-size:.85rem; }
.sectie.donker .legacy .stijl10{ color:#a79f8a; }
.legacy .stijl11{ color:#6b6152; font-size:.92rem; }

.legacy .wthree_tab_content_pos_grid > h2{ margin-top:0; }
.legacy #kleur{ text-align:left; }

.legacy table.tbl{ display:block; width:100%; }
.legacy table.tbl tbody, .legacy table.tbl tr{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.legacy table.tbl td{ display:block; background:var(--perkament); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:1.1rem 1.3rem; flex:1 1 220px; }
.sectie.donker .legacy table.tbl td{ background:var(--inkt-2); border-color:rgba(217,185,120,.25); }
.legacy table.tbl td:empty{ display:none; }

/* Agenda */
.legacy .agileits_agile_about_blog_left, .legacy .agileits_agile_about_blog_right{ width:100%; }
.legacy .agile_about_blog_left_grid, .legacy .agile_about_blog_right_grid{ padding:0; }
.legacy .agile_about_blog_left_grid_pos ul{ list-style:none; margin:0; padding:0; }
.legacy .agile_about_blog_left_grid_pos li{
  font-family:var(--serif); font-size:1.3rem; color:var(--brons); margin-bottom:.3rem;
}
.legacy .clearfix{ display:none; }

/* Bestuur */
.legacy .col-md-6b.agileits_agile_about_left p{
  font-family:var(--serif); font-size:1.2rem; color:var(--roest); margin:1.6rem 0 .8rem;
  border-bottom:1px solid var(--lijn); padding-bottom:.4rem;
}
.legacy .container-fluid{ margin-bottom:.55rem; }
.legacy .row.bestuur{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--lijn); border-radius:var(--radius); overflow:hidden;
}
.legacy .row.bestuur > div{ padding:.65rem 1rem; flex:1 1 220px; font-size:.92rem; }
.legacy .row.bestuur > div:first-child{
  background:var(--brons); color:var(--inkt-1); font-family:var(--serif); flex:0 0 17rem; min-width:0; overflow-wrap:anywhere;
}
.legacy .row.bestuur > div:last-child{ background:var(--perkament); color:var(--tekst-donker); }
.sectie.donker .legacy .row.bestuur > div:last-child{ background:var(--inkt-2); color:var(--tekst-licht); }

/* Contact */
.legacy .w3agile_map{ margin:1.6rem 0; }
.legacy .w3agile_map iframe{ display:none; }
.legacy .agileinfo_map_color_grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem;
}
.legacy .agileinfo_map_color_grid_left{
  background:var(--perkament); border:1px solid var(--lijn); border-radius:var(--radius);
  padding:1.3rem; display:flex; flex-direction:column; gap:.5rem;
}
.sectie.donker .legacy .agileinfo_map_color_grid_left{ background:var(--inkt-2); border-color:rgba(217,185,120,.25); }
.legacy .agileinfo_map_color_grid_left nav{ margin-top:auto; }

/* Film & audio */
.legacy .agileits_agile_about_portfolio{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.3rem; margin-top:1.6rem;
}
.legacy .agileits_agile_about_portfolio_left{ min-width:0; }
.legacy .view{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--lijn); }
.legacy .view a{ text-decoration:none; color:inherit; display:block; }
.legacy .view img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .35s ease; }
.legacy .view:hover img{ transform:scale(1.06); }
.legacy .view span.stijl7{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem;
  background:linear-gradient(0deg, rgba(15,20,16,.92), rgba(15,20,16,0));
  color:var(--tekst-licht); font-size:.88rem; font-weight:600;
}
.legacy .view .mask{ display:none; }
.legacy .verschuif{ background:var(--perkament); border:1px solid var(--lijn); border-radius:var(--radius); padding:1.2rem; }
.sectie.donker .legacy .verschuif{ background:var(--inkt-2); }
.legacy #player{ width:100%; margin-top:.8rem; }

/* Publicaties: box2 (jaargangen) */
.legacy .box2{
  background:var(--perkament); border:1px solid var(--lijn); border-radius:var(--radius);
  padding:.9rem 1.1rem; margin:.4rem 0;
}
.sectie.donker .legacy .box2{ background:var(--inkt-2); }
.legacy .box2 p{ margin:0; }

/* =========================================================================
   Dialogen (native <dialog> i.p.v. Bootstrap-modal)
   ========================================================================= */
dialog.legacy-modal{
  border:none; border-radius:var(--radius); padding:0; width:min(640px,92vw);
  max-height:85vh; color:var(--tekst-donker); background:var(--perkament-licht);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
dialog.legacy-modal::backdrop{ background:rgba(220,190,130,.2); backdrop-filter:blur(2px); }
dialog.legacy-modal .modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem; background:var(--inkt-1); color:var(--tekst-licht);
  font-family:var(--serif); font-size:1.25rem; position:sticky; top:0;
}
dialog.legacy-modal .modal-header + .modal-header{
  background:transparent; color:transparent; padding:.4rem 1.4rem 1.2rem; position:static; justify-content:flex-end;
}
dialog.legacy-modal .modal-header button.close{
  background:transparent; border:1px solid rgba(217,185,120,.5); color:var(--tekst-licht);
  width:2rem; height:2rem; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
dialog.legacy-modal .modal-header + .modal-header button.close{ color:var(--inkt-1); border-color:var(--lijn); }
dialog.legacy-modal .modal-header button.close span{ display:block; margin-top:-2px; }
dialog.legacy-modal .modal-body{ padding:1.4rem; overflow-y:auto; }
dialog.legacy-modal .modal-body img.midden{ width:auto; max-height:280px; }
dialog.legacy-modal .modal-body p{ line-height:1.65; }

/* =========================================================================
   Cookiemelding (eigen, lichte versie zonder externe library)
   ========================================================================= */
.cookiebalk{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--inkt-1); color:var(--tekst-licht); border-top:1px solid rgba(217,185,120,.35);
  padding:.65rem 1.2rem; box-shadow:0 -8px 24px -12px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap;
  transform:translateY(100%); opacity:0; pointer-events:none; transition:transform .25s ease, opacity .25s ease;
}
.cookiebalk.tonen{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookiebalk p{ font-size:.8rem; margin:0; color:#d6d0bd; }
.cookiebalk .rij{ display:flex; gap:1rem; align-items:center; }
.cookiebalk button{
  background:var(--brons); color:var(--inkt-1); border:none; border-radius:2px; padding:.4rem .85rem;
  font-weight:600; font-size:.78rem; cursor:pointer; white-space:nowrap;
}
.cookiebalk a{ font-size:.78rem; color:var(--brons-licht); white-space:nowrap; }

/* =========================================================================
   Responsief — mobiel/tablet (de pagina scrolt hier gewoon normaal)
   ========================================================================= */
@media (max-width:720px){
  .topbar{ padding:.6rem 1rem; }
  .topbar .merk-tekst{ font-size:.95rem; }
  .topbar .merk-tekst small{ display:none; }
  .knop-raadpleeg span.tekst{ display:none; }
  .hero-inhoud{ padding:6rem 1.1rem 3.4rem; max-width:none; }
  .legacy .row.bestuur{ flex-direction:column; }
  .legacy .row.bestuur > div:first-child{ min-width:0; }
  .legacy .row.bestuur > div, .legacy .row.bestuur > div:first-child{ flex:0 0 auto; }
  .cookiebalk{ flex-direction:column; gap:.5rem; text-align:center; padding:.8rem 1rem; }
  .cookiebalk .rij{ width:100%; justify-content:center; }
}

/* =========================================================================
   Laptop/desktop: alles in één niet-scrollend scherm.
   Beneden deze grens (te smal of te laag venster) blijft de site gewoon
   een doorlopende, scrollende pagina — dat is de opmaak hierboven.
   ========================================================================= */
@media (min-width:1100px) and (min-height:640px){
  html, body{ height:100%; overflow:hidden; }

  .beeldscherm{ height:100vh; height:100dvh; display:flex; flex-direction:column; }
  .topbar{ flex:none; position:relative; }
  .shell{ flex:1; min-height:0; display:grid; grid-template-columns:40% 60%; }

  .hero-pane{ min-height:0; height:100%; align-items:center; }
  .hero-inhoud{ padding:0 3.2rem; }
  .hero-badge{ margin-bottom:.9rem; }
  .hero-pane h1{ font-size:clamp(1.55rem,2.3vw,2.3rem); margin-bottom:.25em; }
  .hero-pane p.lead{ margin-bottom:1.1rem; font-size:.93rem; }
  .hero-acties{ margin-bottom:1.1rem; }
  .hero-feiten{ margin-bottom:0; padding-top:1rem; gap:.9rem 1.8rem; }
  .hero-mini-links{ margin-top:1rem; }
  .hero-voet{ margin-top:1rem; padding-top:.7rem; font-size:.68rem; }

  .grid-pane{
    min-height:0; height:100%; max-width:none; margin:0; overflow:hidden;
    padding:1.7rem 2.2rem 1.9rem; display:flex; flex-direction:column;
  }
  .sectie-kop{ flex:none; margin-bottom:1rem; }

  .grid-pane .grid{
    flex:1; min-height:0; display:grid; gap:.6rem;
    grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr);
  }
  .grid-pane .grid > .dv-card{
    grid-column:span 1 !important; grid-row:span 1 !important;
    min-height:0; padding:1rem 1.05rem;
  }
  .dv-card .ico{ width:1.7rem; height:1.7rem; margin-bottom:.4rem; }
  .dv-card h3{
    font-size:1rem; margin-bottom:.2em; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .dv-card p{
    font-size:.77rem; line-height:1.35; margin-bottom:.35rem; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
  }
  .dv-card .naar{ font-size:.71rem; white-space:nowrap; }
}

/* Extra compact op kortere laptopschermen (bv. 1280x720) */
@media (min-width:1100px) and (min-height:640px) and (max-height:760px){
  .dv-card{ padding:.8rem .9rem; }
  .dv-card .ico{ margin-bottom:.25rem; }
  .dv-card p{ -webkit-line-clamp:1; margin-bottom:.25rem; }
  .hero-pane h1{ font-size:clamp(1.4rem,2vw,2rem); }
  .hero-pane p.lead{ font-size:.88rem; margin-bottom:.8rem; }
  .hero-feiten{ padding-top:.7rem; }
  .hero-voet{ margin-top:.7rem; padding-top:.5rem; }
}
/* ===================================================================
   Desktop-indeling: achtergrondafbeelding loopt over het hele scherm,
   het rubriekenoverzicht is half zo hoog en staat onderaan rechts.
   ===================================================================
*/
@media (min-width:1100px) and (min-height:640px){
  .shell{
    position:relative; isolation:isolate;
    background-repeat:no-repeat; background-size:cover; background-position:center;
  }
  /* donkere sluier: links sterker (leesbaarheid hero), onderaan sterker (kaarten) */
  .shell::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(0deg, rgba(15,20,16,.85) 0%, rgba(15,20,16,.35) 55%, rgba(15,20,16,.1) 100%),
      linear-gradient(90deg, rgba(15,20,16,.82) 0%, rgba(15,20,16,.55) 40%, rgba(15,20,16,.15) 100%);
  }
  .hero-pane.bg{ background:none; }
  .hero-pane::after{ display:none; }
  .hero-pane, .grid-pane{ position:relative; z-index:1; }

  .grid-pane{ background:transparent; justify-content:center; }
  .grid-pane .sectie-kop{ margin-bottom:.7rem; }
  .grid-pane .sectie-kop h2{ color:var(--tekst-licht); font-size:clamp(1.4rem,2.2vw,2.1rem); }

  /* rubriekenoverzicht = halve hoogte */
  .grid-pane .grid{ flex:0 0 68%; gap:.5rem; }

  /* compacte, licht doorschijnende kaarten */
  .grid-pane .grid > .dv-card{
    padding:2.25rem .7rem .6rem; justify-content:flex-start; overflow:hidden;
    background:rgba(22,32,26,.78); backdrop-filter:blur(6px);
  }
  .grid-pane .grid > .dv-groot{ background:linear-gradient(135deg,color-mix(in srgb,var(--blauw) 85%,transparent),rgba(116,58,34,.85)); }
  .grid-pane .grid > .dv-klein{ background:linear-gradient(135deg,color-mix(in srgb,var(--geel) 85%,transparent),rgba(116,58,34,.85)); }
  .grid-pane .grid > .dv-extern{ background:linear-gradient(135deg,color-mix(in srgb,var(--roest) 85%,transparent),rgba(116,58,34,.85)); }

  .grid-pane .dv-card .ico{ position:absolute; top:.65rem; left:.85rem; width:1.3rem; height:1.3rem; margin:0; }
  .grid-pane .dv-card h3{ font-size:.92rem; margin-bottom:.15em; }
  .grid-pane .dv-card p{ font-size:.72rem; -webkit-line-clamp:2; margin-bottom:0; }
  /* "Ontdek meer" wordt enkel een pijltje rechtsboven */
  .grid-pane .dv-card .naar{ position:absolute; top:.65rem; right:.85rem; font-size:0; gap:0; }
  .grid-pane .dv-card .naar .svg-ico{ width:1rem; height:1rem; }

  /* ---- leesbaarheid op kleinere laptops ---- */
  .grid-pane{ padding-left:1.4rem; padding-right:1.4rem; }
  .grid-pane .grid > .dv-card{ container-type:inline-size; }
  .grid-pane .dv-card h3{
    font-size:clamp(.82rem, 9cqi, .98rem); line-height:1.15;
    overflow-wrap:anywhere; hyphens:auto; -webkit-hyphens:auto;
    min-height:2.3em; /* titels van 1 of 2 regels: omschrijving begint overal op dezelfde hoogte */
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  }
  .grid-pane .dv-card p{ font-size:clamp(.7rem, 6.6cqi, .78rem); line-height:1.3; -webkit-line-clamp:3; }
  .grid-pane .dv-card br{ display:none; } /* losse <br> tussen titel en omschrijving veroorzaakte ongelijke afstand */
  /* zeer smalle kaarten: enkel icoon, titel en pijltje */
  @media (max-height:760px){ .grid-pane .dv-card p{ -webkit-line-clamp:2; } }
  @container (max-width:90px){
    .grid-pane .dv-card p{ display:none; }
  }
}

/* iets meer ruimte voor de kaarten op kleinere desktops */
@media (min-width:1100px) and (max-width:1500px) and (min-height:640px){
  .shell{ grid-template-columns:minmax(380px,35%) 1fr; }
  .hero-inhoud{ padding:0 2.2rem; }
}

/* Smartphone/tablet en lage vensters: kaartenoverzicht altijd op effen crème,
   met donkere titel (nooit op de achtergrondafbeelding van het bureaublad-scherm). */
@media (max-width:1099px), (max-height:639px){
  .shell{ background-image:none; }
  .shell::before{ display:none; }
  .grid-pane{ background:var(--perkament-licht); position:static; }
  .grid-pane .sectie-kop h2{ color:var(--inkt-1); }
}

/* Let op: index.html geeft #hoofdscherm de klasse "bg" (foto achter het hele scherm).
   Op smartphone/tablet en lage vensters wordt die foto over de hele (lange) pagina
   sterk uitvergroot. Daarom: foto enkel in de hero en achter het kaartenoverzicht,
   met een donkere sluier en lichte titel zodat alles leesbaar blijft. */
@media (max-width:1099px), (max-height:639px){
  .beeldscherm.bg{ background-image:none; background-color:var(--inkt-1); }
  .grid-pane{
    max-width:none; margin:0; padding:3.4rem max(1.4rem, calc((100% - 1180px) / 2)) 2.4rem;
    background:
      linear-gradient(180deg, rgba(15,20,16,.78) 0%, rgba(15,20,16,.86) 100%),
      var(--foto) center / cover no-repeat;
  }
  .grid-pane .sectie-kop h2{ color:var(--tekst-licht); }
}
.bg {
  background-image: var(--foto);
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.verberg-na-5s {
padding: 6px;
animation: verdwijn 1s ease forwards;
animation-delay: 5s;
}
hr.lijn {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(201,255,255,0), rgba(201,255,255,0.2), rgba(201,255,255,0));
background-image:    -moz-linear-gradient(left, rgba(201,255,255,0), rgba(201,255,255,0.2), rgba(201,255,255,0));
background-image:     -ms-linear-gradient(left, rgba(201,255,255,0), rgba(201,255,255,0.2), rgba(201,255,255,0));
background-image:      -o-linear-gradient(left, rgba(201,255,255,0), rgba(201,255,255,0.2), rgba(201,255,255,0));
}

/* Scheidingslijn in de kaarten: geen extra ruimte, zodat de omschrijving niet afgesneden wordt */
.grid-pane .dv-card hr.lijn{ margin:.25rem 0 .4rem; flex:none; }