* { margin: 0; padding: 0; } html { height: 100%; overflow-y: scroll; } body { height: 100%; text-align: center; font-size: 13px; font-family: verdana; background: url('../static_images/body_bg.png') repeat-x; } img { border: 0; } h1 { font-size: 24px; font-weight: normal; color: #691d7c; margin-bottom: 20px; } .clear { clear: both; } #container { position: relative; width: 900px; margin: 0 auto; height: auto !important; /* real browsers */ height: 100%; /* IE6: treaded as min-height*/ min-height: 100%; /* real browsers */ text-align: left; background: url('../static_images/container_bg.jpg') no-repeat; background-color: #FBFBFB; } #header { margin: 0 0px; height: 184px; background: url('../static_images/topheader_bg.png') no-repeat; } #logo { position: absolute; top: 0px; left: 0px; } #topmenu { float: left; position: relative; color: white; width: 475px; margin: 160px 12px 0 425px; } #topmenu a { float: left; text-decoration: none; color: white; font-weight: normal; font-size: 12px; padding-left: 40px; } #topmenu a:first-child { padding-left: 0px; } #topmenu a.selected, #topmenu a:hover { color: black; font-weight: normal; } #page { position: relative; width: 898px; margin: 9px 0px 0 0px; padding-bottom: 20px; border-left: 1px solid white; border-right: 1px solid white; } #leftcol { float: left; width: 208px; } #fb { } #tekst { width: 371px; margin-left: 0px; margin-top: 5px; font-size: 12px; font-family: verdana; color: grey; line-height: 22px; letter-spacing: 0.2px; padding-bottom: 15px; } #news_items { width: 190px; padding: 0 20px 0 0; border-bottom: grey solid 1px; } #news_pages { width:400px; padding: 0 20px 0 0; border-bottom: grey solid 1px; } #rightcol { float: left; width: 211px; border-left: 1px solid white; } #contentcol { float: left; width: 478px; } #menu { width: 206px; margin-top: 16px; } #menu a { display: block; text-decoration: none; color: white; font-weight: normal; font-size: 14px; padding: 2px 20px 5px 3px; text-align: right; } #menu a.level1_selected, #menu a.level1:hover { color: #5b2363; } #menu a.level2_selected, #menu a.level2 { background: url('../static_images/menu2a_bg.png') no-repeat; font-weight: normal; font-size: 11px; padding-right: 30px; } #menu a.level3_selected, #menu a.level3:hover { color: white; } #menu a.level3_selected, #menu a.level3 { background-color: white; color: black; font-weight: normal; font-size: 12px; padding-left: 20px; } #menu a.level2_selected, #menu a.level2:hover { color: #5b2363; } #foto2 { margin-top: 140px; } #slideshow { margin-top: 0px; width: 477px; height: 205px; background-color: black; margin-left: 1px; } #slideshow img { width: 477px; height: 205px; display: none; } #content { position: relative; width: 438px; margin-top: 0px; padding: 20px 20px 20px 20px; color: grey; } #content a { text-decoration: none; color: black; text-decoration: underline; } #content a:hover { color: red; } #field_vraag{ width: 320px; height: 90px; } ul { line-height: 22px; letter-spacing: 0.2px; padding-left: 14px; } p { margin: 1.2em 0; line-height: 20px; letter-spacing: 0.1px; } table, td { empty-cells: show; }
/* =========================================================
MOBIEL/TABLET LAAG (=979px) — desktop blijft onaangeroerd
========================================================= */
@media (max-width: 979px) {
/* Basis / resets */
html, body { max-width:100%; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
/* Container flush */
#container, #page { width:100% !important; max-width:100% !important; margin:0 auto !important; }
#page { padding:0 !important; border:0 !important; }
/* Header compact + merk + hamburger */
#topmenu { display:none !important; }
#header{
height:auto !important; min-height:64px;
display:flex !important; align-items:center; gap:10px; justify-content:flex-start;
padding:10px 12px !important;
background:linear-gradient(180deg,#9f74c8,#8d60b3) !important;
position:sticky !important; top:0; z-index:10000 !important; /* altijd boven */
}
#header > a > #logo{ position:static !important; max-height:44px !important; width:auto !important; }
.brand-title{ display:inline-block; color:#fff; font-weight:800; font-size:16px; letter-spacing:.2px; margin-left:8px; }
.fd-hamb{ appearance:none; border:0; background:transparent; padding:6px; cursor:pointer; line-height:0; margin-left:auto; }
.fd-hamb svg{ width:28px; height:28px; fill:#fff; }
/* Drawer */
.fd-drawer{
position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
background:#fff; color:#1c1424; box-shadow:-8px 0 24px rgba(0,0,0,.18);
transform:translateX(100%); transition:transform .25s ease; z-index:1200;
display:flex; flex-direction:column;
}
.fd-drawer.open{ transform:translateX(0); }
.fd-drawer header{ padding:14px 16px; font-weight:800; background:#f6efff; border-bottom:1px solid #eee; }
.fd-drawer .fd-list{ padding:10px 14px; display:grid; gap:8px; overflow:auto; }
.fd-drawer .fd-section{ margin-top:10px; font-size:12px; color:#6f5b86; text-transform:uppercase; letter-spacing:.04em; }
.fd-drawer a{ display:block; padding:10px 12px; border:1px solid #eee; border-radius:10px; text-decoration:none; color:#3b2b4e; }
.fd-drawer a.fd-strong{ font-weight:800; }
.fd-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .2s; z-index:1190; }
.fd-backdrop.show{ opacity:1; pointer-events:auto; }
/* Drawer: accordion */
.fd-item{ border:0; }
.fd-item .fd-top{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #eee; border-radius:10px; }
.fd-item .fd-top .fd-label{ flex:1 1 auto; text-decoration:none; color:#3b2b4e; }
.fd-item .fd-top .fd-chevron{ transform:rotate(0); transition:transform .2s; }
.fd-item.expanded .fd-top .fd-chevron{ transform:rotate(90deg); }
.fd-sub{ display:none; padding-left:8px; }
.fd-item.expanded .fd-sub{ display:grid; gap:8px; margin-top:8px; }
/* Layout volgorde: slideshow ? CTA ? content; rightcol gaat in drawer */
#page{
display:grid !important;
grid-template-columns:1fr;
grid-template-areas: "slideshow" "leftcol" "contentcol";
gap:12px;
}
#leftcol, #rightcol, #contentcol{ float:none !important; width:auto !important; margin:0 !important; position:relative; }
#rightcol, #foto2 { display:none !important; }
/* Slideshow container — laat Cycle positioneren; geen overlap meer */
#slideshow{
grid-area:slideshow;
margin:0 !important; width:100% !important; background:none !important;
position:relative !important; overflow:hidden !important; z-index:0 !important;
}
#slideshow img{ z-index:0 !important; } /* slides nooit boven CTA/header */
/* CTA kaart */
#leftcol{ grid-area:leftcol; }
#leftcol #tekst, #leftcol #foto{ display:none !important; } /* originele blokken verbergen op mobiel */
.fd-cta{
display:grid; grid-template-columns:minmax(88px,38%) 1fr; align-items:stretch; gap:12px;
background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
padding:12px; overflow:hidden; margin:5px 15px 15px 15px;
position:relative !important; z-index:1 !important; /* boven slideshow */
}
.fd-cta .fd-cta-img{ width:100%; height:auto; object-fit:cover; border-radius:12px; background:#f2f2f6; align-self:stretch; }
.fd-cta .fd-cta-text{ font-size:14px; line-height:1.55; color:#222; }
.fd-cta table, .fd-cta td, .fd-cta tr { height:auto !important; width:auto !important; }
.fd-cta p:empty, .fd-cta div:empty, .fd-cta tr:empty, .fd-cta br { display:none !important; }
/* Content full width en embeds fluid */
#contentcol{ grid-area:contentcol; width:100% !important; }
#content{ width:auto !important; padding:12px 15px !important; }
#content img, #content table{ max-width:100% !important; height:auto !important; }
#content iframe{ width:100% !important; height:320px !important; border:0; }
/* Facebook-badge nooit zichtbaar op mobiel */
#fb, #fb *{ display:none !important; }
}
/* Mobiele UI verbergen op desktop */
@media (min-width: 980px) {
.brand-title, .fd-hamb, .fd-drawer, .fd-backdrop { display:none !important; }
}