/* ================================================================ main.css — defer (onderaan ) Below-the-fold: venue detail, artikelen, blog, specs, footer, prose, sidebar, galerij, kaart, over ons, USP, contact, 404, print ================================================================ */ :root { /* Spacing scale (4pt base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Typography scale (1.25×) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; /* Font families */ --ff-display: 'DM Serif Display', Georgia, serif; --ff-body: 'Inter', -apple-system, sans-serif; /* Border radius */ --radius-sm: 4px; --radius-base: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Extra kleur-aliassen */ --color-text-body: #6b6b6b; --color-text-body-alt: #737373; --color-neutral-333: #333; --color-neutral-444: #444; --color-neutral-666: #666; --color-neutral-777: #777; --color-neutral-999: #999; --color-neutral-ccc: #ccc; --color-neutral-eee: #eee; --color-bg-page: #f5f4ef; --color-bg-elevated-warm: #fafaf7; --color-bg-elevated-cool: #faf9f5; --color-bg-elevated-warm-2: #fafaf8; --color-success: #1a7a5a; --color-success-dark: #0a2f1f; --color-success-text: #166534; --color-success-bg: #d1fae5; --color-success-bg-soft: #f0fdf4; --color-success-border: #86efac; --color-success-deep: #065f46; --color-accent-teal: #1a9e72; --color-danger-bg-soft: #fef2f2; --color-dark-navy: #1a1a2e; --color-dark-navy-alt: #1e1e2e; --color-dark-navy-text: #e0e0e0; --color-dark-navy-surface: #2a2a3e; /* Purple palette (exclusive/spot badges, dev-tools) */ --color-purple: #7c3aed; --color-purple-dark: #6d28d9; --color-purple-darker: #5b21b6; --color-purple-bg: #f5f0ff; --color-purple-border: #e2d9f3; /* Blue link accent */ --color-link-blue: #1d4ed8; } :root { --color-white: #fff; --color-text-dark: #1a1a1a; --color-text-muted: #555; --color-text-light: var(--color-text-body-alt); --color-text-lighter: #aaa; --color-border: #e8e6df; --color-border-light: #ddd; --color-bg-soft: #f0efe9; --color-bg-muted: #f7f6f2; --color-red: #dc2626; --color-red-dark: #991b1b; --color-red-light-bg: #fee2e2; --color-red-light-border: #fca5a5; --color-warning-bg: #fef3c7; --color-warning-border: #fde68a; --color-warning-text: #92400e; --color-success-border-soft: #bbf7d0; --color-success-text-alt: #15803d; --color-neutral-9a: #9a9a9a; --color-neutral-f0: #f0f0f0; --color-neutral-f5: #f5f5f5; --color-success-bg-pale: #ecfdf5; --color-red-border: #fecaca; --color-star-gold: #facc15; --color-star-gold-dark: #eab308; --color-warning-accent: #b45309; --color-warning-bg-soft: #fffbeb; --color-neutral-888: #888; } /* Venue detail hero */ .vh{height:280px;overflow:hidden;background:var(--ct)} .vh picture,.vh img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover} /* Venue detail layout */ .vlay{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start;margin-top:var(--space-4);overflow-wrap:break-word;word-wrap:break-word} .vtitle{font-family:var(--ff-display);font-size:32px;font-weight:400;margin-bottom:var(--space-2);line-height:1.2;overflow-wrap:break-word;word-wrap:break-word} .vloc{font-size:15px;color:var(--cm);margin-bottom:var(--space-4)} .vsnav{display:flex;border-bottom:1px solid var(--cb);margin-bottom:var(--space-5);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .vsnav::-webkit-scrollbar{display:none} .vsnav a{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--cm);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0} .vsnav a:hover{color:var(--ct)} .vsnav a.active{color:var(--p);border-bottom-color:var(--p);font-weight:600} .bbox{background:var(--cs);border:1px solid var(--cb);border-radius:12px;padding:var(--space-5);position:static} .bprice{font-size:28px;font-weight:700;color:var(--p);margin-bottom:var(--space-1)} .bprice small{font-size:var(--text-sm);font-weight:400;color:var(--cm)} .bseason{font-size:var(--text-xs);color:var(--color-text-body-alt);margin-bottom:var(--space-3)} .btn-book{display:block;background:var(--p);color:var(--color-white);text-align:center;padding:var(--space-3);border-radius:9px;font-weight:600;font-size:var(--text-base);margin-bottom:var(--space-2)} .btn-book:hover{background:var(--pd)} .btn-contact-sm{display:block;background:var(--color-white);color:var(--ct);text-align:center;padding:var(--space-3);border-radius:9px;font-size:var(--text-sm);border:1px solid var(--cb)} .btn-contact-sm:hover{background:var(--cs)} .bspec{display:flex;justify-content:space-between;padding:var(--space-1) 0;font-size:13px;border-bottom:1px solid var(--color-bg-soft)} .bspec:last-child{border-bottom:none} .bspec-l{color:var(--cm)} .bspec-v{font-weight:600} .bspec-excl{color:var(--color-purple)} /* Artikel layouts */ .art-hero{position:relative;height:200px;overflow:hidden;background:var(--ct)} .art-hero img{width:100%;height:100%;object-fit:cover;opacity:.65} .art-hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%)} .art-hero-overlay .c{padding-bottom:var(--space-6)} .art-hero-title{font-family:var(--ff-display);font-size:clamp(22px,4vw,38px);font-weight:400;color:var(--color-white);line-height:1.2;margin:var(--space-2) 0 var(--space-2);max-width:760px} .art-hero-meta{font-size:var(--text-sm);color:rgba(255,255,255,.75)} .art-bc-top{margin:var(--space-4) 0 0} .art-cat-badge{display:inline-block;background:var(--p);color:var(--color-white);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:var(--space-1) var(--space-3);border-radius:20px} .art-banner{background:linear-gradient(135deg,var(--pd),var(--p));color:var(--color-white);padding:var(--space-6) 0 var(--space-6)} .art-banner .bc{margin:0 0 var(--space-3)} .art-banner .bc a{color:rgba(255,255,255,.7)} .art-banner .bc i{color:rgba(255,255,255,.3)} .art-banner .bc span{color:rgba(255,255,255,.9)} .art-banner-light{background:var(--cs);border-bottom:1px solid var(--cb);padding:var(--space-5) 0} .art-banner-light .bc{margin:0 0 var(--space-2)} .art-title{font-family:var(--ff-display);font-size:clamp(22px,4vw,34px);font-weight:400;line-height:1.2;margin:var(--space-2) 0 var(--space-1);color:var(--color-white)} .art-title-dark{color:var(--ct)} .art-meta{font-size:13px;color:rgba(255,255,255,.75);margin-top:var(--space-1)} .art-lead{font-size:17px;color:var(--cm);line-height:1.7;margin:var(--space-4) 0 var(--space-5);padding-left:var(--space-3);border-left:3px solid var(--p)} .art-lead-banner{font-size:var(--text-base);color:var(--cm);line-height:1.6;margin-top:var(--space-2);max-width:640px} /* Blog layout */ .blog-layout{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start;padding:var(--space-4) 0 var(--space-6)} .blog-featured{display:grid;grid-template-columns:1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--cb);margin-bottom:var(--space-6);color:inherit} .blog-featured:hover{box-shadow:0 4px 24px rgba(0,0,0,.1)} .blog-featured-img{overflow:hidden;background:var(--cs);min-height:200px} .blog-featured-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .blog-featured-ph{display:flex;align-items:center;justify-content:center;font-size:var(--text-4xl);background:linear-gradient(135deg,var(--pd),var(--p))} .blog-featured-body{padding:var(--space-5);display:flex;flex-direction:column;justify-content:center;gap:var(--space-2)} .blog-featured-title{font-family:var(--ff-display);font-size:var(--text-lg);font-weight:400;line-height:1.3} .blog-featured-excerpt{font-size:var(--text-sm);color:var(--cm);line-height:1.6} .blog-featured-read{font-size:13px;color:var(--p);font-weight:600} .blog-index-sub{font-size:18px;font-weight:700;margin:var(--space-2) 0 var(--space-4)} /* Blog kaarten */ .bgrid{display:grid;grid-template-columns:1fr;gap:var(--space-3)} .bcard{background:var(--color-white);border:1px solid var(--cb);border-radius:var(--r);overflow:hidden;display:block;color:inherit} .bcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)} .bcard-img{aspect-ratio:16/9;background:var(--cs);overflow:hidden;min-height:160px;position:relative} .bcard-img img{width:100%;height:100%;object-fit:cover} .bcard-img-ph{width:100%;height:100%;min-height:160px;background:linear-gradient(135deg,var(--pd),var(--p));display:flex;align-items:center;justify-content:center;font-size:32px} .bcard-body{padding:var(--space-4)} .bcard-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--p);margin-bottom:var(--space-1);display:block} .bcard-title{font-size:15px;font-weight:600;line-height:1.3;margin-bottom:var(--space-1)} .bcard-excerpt{font-size:13px;color:var(--cm);line-height:1.5} .bcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--cb)} .bcard-date{font-size:var(--text-xs);color:var(--cm)} .bcard-read{font-size:var(--text-xs);color:var(--p);font-weight:600} /* Blog categorie tabs */ .blog-cats-bar{background:var(--cs);border-bottom:1px solid var(--cb);padding:var(--space-2) 0} .blog-cats-in{display:flex;gap:var(--space-1);flex-wrap:wrap;align-items:center} .blog-cat-link{padding:var(--space-1) var(--space-3);border-radius:20px;font-size:13px;color:var(--cm);border:1px solid transparent} .blog-cat-link:hover{border-color:var(--cb);background:var(--color-white)} .blog-cat-link.active{background:var(--p);color:var(--color-white);border-color:var(--p)} /* Specs */ .sgrid{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin:var(--space-4) 0} .si{background:var(--cs);border-radius:var(--radius-base);padding:var(--space-3)} .si-l{font-size:11px;color:var(--cm);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-1)} .si-v{font-size:var(--text-lg);font-weight:700;line-height:1.2} .kenm{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0} .km{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:20px;background:var(--cs);border:1px solid var(--cb);font-size:13px} .km.on{background:var(--color-success-bg-soft);border-color:var(--color-success-border-soft);color:var(--color-success-text-alt)} .km.off{opacity:.35} /* Lege state */ .empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--cm)} .empty-state-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4)} .cat-empty{text-align:center;padding:var(--space-7) var(--space-4);max-width:540px;margin:0 auto} .cat-empty-icon{font-size:52px;margin-bottom:var(--space-4)} .cat-empty-title{font-size:22px;font-weight:700;margin-bottom:var(--space-2)} .cat-empty-text{font-size:15px;color:var(--cm);line-height:1.7;margin-bottom:var(--space-5)} .cat-empty-btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4)} .cat-empty-subs .subcat-bar{justify-content:center} .subcat-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-5)} .subcat-pill{padding:var(--space-1) var(--space-4);border-radius:20px;border:1px solid var(--cb);background:var(--color-white);font-size:13px;color:var(--cm)} .subcat-pill:hover{border-color:var(--p);color:var(--p)} /* Footer */ .sf{background:var(--color-text-dark);color:rgba(255,255,255,.7);padding:var(--space-8) 0 var(--space-5)} .fg{max-width:var(--mw);margin:0 auto;padding:0 var(--space-5);display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-bottom:var(--space-7)} .fc h3,.fc-heading{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-3);color:rgba(255,255,255,.5)} .fc a{display:block;font-size:13px;color:rgba(255,255,255,.65);background-color:var(--color-text-dark);padding:var(--space-1) 0;line-height:1.8;transition:color .15s} .fc a:hover{color:var(--color-white)} .fc p{font-size:13px;color:rgba(255,255,255,.5);background-color:var(--color-text-dark);line-height:1.7} .fc-brand{font-family:var(--ff-display);font-size:18px;font-weight:400;display:block;margin-bottom:var(--space-2);color:var(--color-white)} .fc-logo{filter:brightness(0) invert(1);opacity:.9} .fc-more{display:block;font-size:var(--text-xs);color:var(--p);font-weight:600;margin-top:var(--space-2)} .fb{max-width:var(--mw);margin:0 auto;padding:var(--space-4) var(--space-5) 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:var(--space-1);text-align:center;font-size:var(--text-xs);color:rgba(255,255,255,.4)} .fb a{color:rgba(255,255,255,.4)} .fb a:hover{color:rgba(255,255,255,.7)} /* USP balk — trust section */ .usp{background:var(--cw);border-top:1px solid var(--cb);border-bottom:1px solid var(--cb);padding:var(--space-7) 0} .usp-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);text-align:center} .usp-item{padding:var(--space-2)} .usp-icon{font-size:32px;margin-bottom:var(--space-3);line-height:1;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--pl);border-radius:50%;margin:0 auto var(--space-3)} .usp-title{font-family:var(--ff-display);font-weight:400;margin-bottom:var(--space-1);font-size:17px;color:var(--ct)} .usp-text{font-size:13px;color:var(--cm);line-height:1.6} /* Over ons */ .over-ons-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:center} .over-ons-eyebrow{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--p);margin-bottom:var(--space-2)} .over-ons-text h2{font-family:var(--ff-display);font-size:var(--text-2xl);font-weight:400;margin-bottom:var(--space-4);line-height:1.3} .over-ons-text p{font-size:15px;color:var(--cm);line-height:1.8;margin-bottom:var(--space-3)} .over-ons-btn{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);color:var(--p);font-weight:600;font-size:var(--text-sm);padding:var(--space-3) var(--space-5);background:var(--pl);border-radius:10px;transition:background .15s} .over-ons-btn:hover{background:var(--color-success-bg)} .over-ons-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .stat-item{background:var(--color-white);border:1px solid var(--cb);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center} .stat-nr{display:block;font-family:var(--ff-display);font-size:38px;font-weight:400;color:var(--p);line-height:1} .stat-lbl{display:block;font-size:13px;color:var(--cm);margin-top:var(--space-2)} /* Contact pagina */ .contact-layout{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:start;padding:var(--space-5) 0 var(--space-6)} .ct-section-title{font-family:var(--ff-display);font-size:var(--text-2xl);font-weight:400;margin:0 0 var(--space-5);color:var(--ct);line-height:1.3} .ct-cards{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-bottom:var(--space-5)} .ct-card{background:var(--color-white);border:1px solid var(--cb);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column} .ct-card-icon{font-size:var(--text-2xl);margin-bottom:var(--space-3)} .ct-card-title{font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-2);color:var(--ct)} .ct-card-desc{font-size:var(--text-sm);color:var(--cm);line-height:1.7;margin:0 0 var(--space-4);flex:1} .ct-card-cta{display:inline-block;background:var(--p);color:var(--color-white);padding:var(--space-2) var(--space-4);border-radius:var(--radius-base);font-size:var(--text-sm);font-weight:600;text-decoration:none;transition:background .15s;align-self:flex-start} .ct-card-cta:hover{background:var(--pd);color:var(--color-white)} .ct-banner{background:linear-gradient(135deg,var(--color-success-dark),var(--p));border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);text-align:center;color:var(--color-white);margin-bottom:var(--space-5)} .ct-banner-title{font-family:var(--ff-display);font-size:var(--text-xl);font-weight:400;margin:0 0 var(--space-3);color:var(--color-white)} .ct-banner-desc{font-size:var(--text-sm);line-height:1.7;margin:0;opacity:.9;max-width:560px;margin-left:auto;margin-right:auto} .contact-form-card{background:var(--color-white);border:1px solid var(--cb);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-5) var(--space-6)} .contact-form-title{font-family:var(--ff-display);font-size:var(--text-xl);font-weight:400;margin:0 0 var(--space-1);color:var(--ct);line-height:1.3} .contact-form-sub{font-size:var(--text-sm);color:var(--cm);margin:0 0 var(--space-5);line-height:1.5} .cf-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)} .cf-field{margin-bottom:var(--space-4)} .cf-field label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--cm);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)} .cf-req{color:var(--color-red)} .cf-field input,.cf-field select,.cf-field textarea{width:100%;padding:var(--space-3) var(--space-3);border:1px solid var(--cb);border-radius:var(--radius-base);font-size:var(--text-sm);color:var(--ct);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s} .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(26,122,90,.1)} .cf-field textarea{resize:vertical;min-height:120px} .cf-check label{display:flex;align-items:flex-start;gap:var(--space-2);font-size:13px;color:var(--cm);font-weight:400;text-transform:none;letter-spacing:0} .cf-check input{width:auto;margin-top:2px;flex-shrink:0} .cf-check a{color:var(--p)} .cf-submit{background:var(--p);color:var(--color-white);padding:var(--space-3) var(--space-5);border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;width:100%;margin-top:var(--space-2);transition:background .15s} .cf-submit:hover{background:var(--pd)} .contact-info-card{background:var(--cs);border:1px solid var(--cb);border-radius:var(--r);padding:var(--space-5);margin-bottom:var(--space-4)} .contact-info-title{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--cb)} .contact-info-item{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3)} .contact-info-item:last-child{margin-bottom:0} .ci-icon{font-size:var(--text-lg);flex-shrink:0;margin-top:2px} .contact-info-item strong{display:block;font-size:var(--text-xs);color:var(--cm);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px} .contact-info-item a,.contact-info-item span{font-size:var(--text-sm);color:var(--ct)} .contact-info-item a:hover{color:var(--p)} .contact-usp-list{background:var(--color-success-bg-soft);border:1px solid var(--color-success-border-soft);border-radius:var(--r);padding:var(--space-4) var(--space-4)} .contact-usp-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;font-size:var(--text-sm);color:var(--color-success-text-alt)} .contact-usp-item span{color:var(--ct)} /* Subpagina elementen */ .subpage-cta-box{text-align:center;padding:var(--space-8) var(--space-4);max-width:480px;margin:0 auto} .subpage-cta-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4)} .subpage-cta-box h2{font-size:22px;font-weight:700;margin-bottom:var(--space-2)} .subpage-cta-box p{font-size:15px;color:var(--cm);margin-bottom:var(--space-5);line-height:1.6} .subpage-frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--cb)} /* Prose / artikel body */ .prose h2{font-family:var(--ff-display);font-size:22px;font-weight:400;margin:var(--space-5) 0 var(--space-2);line-height:1.3} .prose h3{font-size:17px;font-weight:600;margin:var(--space-4) 0 var(--space-2)} .prose p{margin-bottom:var(--space-3);line-height:1.75} .prose ul,.prose ol{padding-left:var(--space-5);margin-bottom:var(--space-3);list-style:revert} .prose li{margin-bottom:var(--space-1);line-height:1.7} .prose a{color:var(--p);text-decoration:underline} .prose blockquote{border-left:3px solid var(--p);padding-left:var(--space-3);color:var(--cm);margin:var(--space-4) 0;font-style:italic} .prose code{background:var(--cs);padding:1px var(--space-1);border-radius:var(--radius-sm);font-size:13px} .prose table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm)} .prose th{background:var(--cs);padding:var(--space-2) var(--space-3);text-align:left;font-weight:600;border-bottom:2px solid var(--cb)} .prose td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--cb)} .prose img{border-radius:var(--r);margin:var(--space-4) 0} .prose strong{font-weight:600} /* Artikel detail elementen */ .art-lead-full{font-size:18px;color:var(--cm);line-height:1.7;margin:var(--space-4) 0 var(--space-5);padding-left:var(--space-3);border-left:3px solid var(--p)} .art-tags{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--cb);font-size:13px;color:var(--cm)} .art-back{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--cb);font-size:13px;color:var(--cm)} .art-back a{color:var(--p)} .art-back a:hover{text-decoration:underline} .page-body{max-width:820px;padding:var(--space-6) 0 var(--space-7)} /* Blog sidebar */ .side-cta{background:linear-gradient(135deg,var(--pd),var(--p));color:var(--color-white);border-radius:var(--r);padding:var(--space-5);margin-bottom:var(--space-4)} .side-cta-eyebrow{font-size:11px;opacity:.8;margin-bottom:var(--space-1)} .side-cta-title{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-1)} .side-cta-text{font-size:13px;opacity:.8;margin-bottom:var(--space-3);line-height:1.5} .side-cta-btn{display:block;background:var(--color-white);color:var(--p);text-align:center;padding:var(--space-2);border-radius:var(--radius-base);font-weight:600;font-size:var(--text-sm)} .side-cta-btn:hover{opacity:.92} .side-card{background:var(--cs);border:1px solid var(--cb);border-radius:var(--r);padding:var(--space-4);margin-bottom:var(--space-4)} .side-card-title{font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--cb)} .side-cats{margin:0} .side-cats li{border-bottom:1px solid var(--cb)} .side-cats li:last-child{border-bottom:none} .side-cats a{display:block;padding:var(--space-2) 0;font-size:13px;color:var(--cm)} .side-cats a:hover{color:var(--p)} /* Galerij */ .gallery-preview{display:grid;grid-template-columns:1fr;gap:var(--space-2);margin-top:var(--space-5)} .gallery-preview-item{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-base)} .gallery-preview-item img{width:100%;height:100%;object-fit:cover} .gallery-more{display:inline-block;margin-top:var(--space-2);font-size:13px;color:var(--p)} /* OpenStreetMap */ .venue-map{border-radius:var(--r);overflow:hidden;border:1px solid var(--cb);margin-top:var(--space-3)} .venue-map iframe{display:block;width:100%;height:200px;border:none} .venue-map-link{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--cm);display:block} /* Pagina-hero banner (light) */ .art-banner-light .art-title-dark{color:var(--ct)} .art-banner-light .art-lead-banner{color:var(--cm)} /* 404 */ .err404{text-align:center;padding:var(--space-8) var(--space-4)} .err404-icon{font-size:var(--text-5xl);margin-bottom:var(--space-3)} .err404 h1{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-2)} .err404 p{color:var(--cm);font-size:15px;margin-bottom:var(--space-5)} .err404-btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap} /* Embed widget (voor iframe op externe sites) */ .ae-embed-widget{width:100%;min-height:600px;border:none} /* Print */ @media print{ .sh,.sf,.fbar,.vsnav,.bbox,.mob,.qlinks,.usp{display:none} .c{max-width:100%;padding:0} .vgrid,.bgrid{grid-template-columns:1fr 1fr} .vlay{grid-template-columns:1fr} } /* Responsive — mobile-first (tablet+) */ @media(min-width:480px){ .sgrid{grid-template-columns:1fr 1fr} .fg{grid-template-columns:1fr 1fr;gap:var(--space-4)} .usp-grid{grid-template-columns:1fr 1fr} .gallery-preview{grid-template-columns:1fr 1fr} .art-hero{height:260px} .vh{height:320px} } /* Responsive — mobile-first (desktop) */ @media(min-width:768px){ .vlay{grid-template-columns:1fr 320px;gap:var(--space-6);margin-top:var(--space-6)} .bbox{position:sticky;top:80px} .sgrid{grid-template-columns:repeat(3,1fr)} .blog-layout{grid-template-columns:1fr 280px;gap:var(--space-7);padding:var(--space-6) 0 var(--space-7)} .blog-featured{grid-template-columns:1fr 1fr} .blog-featured-img{min-height:260px} .bgrid{grid-template-columns:repeat(3,1fr);gap:var(--space-4)} .art-hero{height:480px} .vh{height:500px} .over-ons-grid{grid-template-columns:1fr 1fr;gap:var(--space-7)} .usp-grid{grid-template-columns:repeat(4,1fr);gap:var(--space-5)} .contact-layout{grid-template-columns:1fr 340px;gap:var(--space-7);padding:var(--space-6) 0 var(--space-8)} .ct-cards{grid-template-columns:1fr 1fr} .ct-cards-two{grid-template-columns:1fr 1fr} .contact-form-card{padding:var(--space-6) var(--space-6) var(--space-7)} .cf-row{grid-template-columns:1fr 1fr} .fg{grid-template-columns:repeat(4,1fr);gap:var(--space-5)} .fb{flex-direction:row;text-align:left;justify-content:space-between} .gallery-preview{grid-template-columns:repeat(3,1fr)} } /* Dev Tools — standalone CSS */ .dt-fab{position:fixed;bottom:var(--space-5);right:var(--space-9);z-index:9998;width:48px;height:48px;border-radius:50%;background:var(--color-dark-navy);color:var(--color-white);border:2px solid var(--color-neutral-333);cursor:pointer;font-size:var(--text-lg);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s} .dt-fab:hover{transform:scale(1.1)} .dt-overlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .dt-overlay.dt-panel-open{display:block} .dt-container{position:absolute;inset:10px;background:var(--color-white);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)} .dt-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-dark-navy);color:var(--color-white);flex-shrink:0} .dt-header-left{display:flex;align-items:center;gap:var(--space-3)} .dt-title{font-weight:600;font-size:15px} .dt-page-badge{font-size:var(--text-xs);color:var(--color-neutral-9a);background:var(--color-dark-navy-surface);padding:2px var(--space-2);border-radius:10px} .dt-header-right{display:flex;gap:var(--space-2);align-items:center} .dt-mode-label{font-size:11px;color:var(--color-text-lighter)} .dt-close-btn{background:none;border:none;color:var(--color-text-body-alt);cursor:pointer;font-size:var(--text-lg);padding:var(--space-1) var(--space-2)} .dt-toolbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated-cool);flex-shrink:0;flex-wrap:wrap} .dt-file-select{flex:1;min-width:200px;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border-light);border-radius:6px;font-size:13px;font-family:monospace} .dt-btn-active.dt-btn-active{background:var(--color-dark-navy);color:var(--color-white);border:none;border-radius:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);cursor:pointer} .dt-btn-inactive{background:var(--color-border);color:var(--color-neutral-333);border:none;border-radius:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);cursor:pointer} .dt-btn-scan{background:var(--color-purple-darker);color:var(--color-white);border:none;border-radius:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);cursor:pointer} .dt-btn-submit{background:var(--color-success-deep);color:var(--color-white);border:none;border-radius:6px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);cursor:pointer} .dt-btn-css{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);background:#0e7490;color:var(--color-white);border:none;border-radius:6px;cursor:pointer} .dt-btn-css-active.dt-btn-css-active{background:#0e7490;color:var(--color-white)} .dt-btn-error{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);background:var(--color-warning-text);color:var(--color-white);border:none;border-radius:6px;cursor:pointer} .dt-btn-error-active.dt-btn-error-active{background:var(--color-red);color:var(--color-white);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border:none;border-radius:6px;cursor:pointer} .dt-btn-error-default{background:var(--color-warning-text);color:var(--color-white);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border:none;border-radius:6px;cursor:pointer} .dt-content-area{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column} .dt-view-wrap{flex:1;overflow:auto} .dt-code-view{margin:0;padding:var(--space-4) var(--space-4);font-size:13px;line-height:1.65;font-family:'Fira Code',monospace;tab-size:4;white-space:pre;background:var(--color-dark-navy);color:var(--color-dark-navy-text);min-height:100%} .dt-edit-wrap{flex:1;overflow:hidden} .dt-code-edit{width:100%;height:100%;margin:0;padding:var(--space-4) var(--space-4);font-size:13px;line-height:1.65;font-family:'Fira Code',monospace;tab-size:4;border:none;resize:none;background:var(--color-dark-navy-alt);color:var(--color-dark-navy-text);outline:none;box-sizing:border-box} .dt-diff-wrap{flex:1;overflow:auto} .dt-submit-wrap{flex:1;overflow:auto;padding:var(--space-5) var(--space-6)} .dt-submit-heading{margin:0 0 var(--space-4);font-size:18px} .dt-submit-hint{font-size:13px;color:var(--color-text-body);margin-bottom:var(--space-4)} .dt-form-group{margin-bottom:var(--space-4)} .dt-form-label{font-size:13px;font-weight:600;display:block;margin-bottom:var(--space-1)} .dt-form-input{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-light);border-radius:6px;font-size:13px;box-sizing:border-box} .dt-form-input-ro{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-light);border-radius:6px;font-family:monospace;font-size:13px;background:var(--color-neutral-f5);box-sizing:border-box} .dt-form-textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-light);border-radius:6px;font-size:13px;resize:vertical;box-sizing:border-box} .dt-submit-actions{display:flex;gap:var(--space-2);align-items:center} .dt-submit-primary{background:var(--color-success-deep);color:var(--color-white);border:none;border-radius:6px;padding:var(--space-2) var(--space-4);cursor:pointer;font-size:13px} .dt-scan-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column} .dt-scan-toolbar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated-cool);flex-wrap:wrap;flex-shrink:0} .dt-scan-count{font-size:11px;color:var(--color-text-body);background:var(--color-neutral-f0);padding:2px var(--space-2);border-radius:10px} .dt-flex-spacer{flex:1} .dt-scan-filter-wrap{display:flex;gap:var(--space-1);flex-wrap:wrap} .dt-scan-filter{font-size:11px;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border-light);border-radius:12px;cursor:pointer;background:var(--color-white);color:var(--color-neutral-333)} .dt-scan-filter-btn-active.dt-scan-filter-btn-active{font-size:11px;padding:var(--space-1) var(--space-3);border:1px solid var(--color-dark-navy);border-radius:var(--radius-full);cursor:pointer;background:var(--color-dark-navy);color:var(--color-white)} .dt-scan-filter-btn{font-size:11px;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-light);border-radius:var(--radius-full);cursor:pointer;background:var(--color-white);color:var(--color-neutral-333);transition:all .15s ease} .dt-scan-filter-btn:hover{background:var(--color-bg-soft);border-color:var(--color-border)} .dt-scan-results{flex:1;overflow:auto;padding:var(--space-3) var(--space-4)} .dt-scan-actions-bar{padding:var(--space-3) var(--space-4);border-top:2px solid var(--color-border);background:var(--color-bg-elevated-cool);flex-shrink:0} .dt-scan-actions-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} .dt-scan-selected{font-size:13px;color:var(--color-text-muted)} .dt-scan-btn-single{padding:var(--space-2) var(--space-4);background:var(--color-success-deep);color:var(--color-white);border:none;border-radius:6px;cursor:pointer;font-size:13px} .dt-scan-btn-filtered{padding:var(--space-2) var(--space-4);background:var(--color-purple);color:var(--color-white);border:none;border-radius:6px;cursor:pointer;font-size:13px} .dt-scan-btn-chunked{padding:var(--space-2) var(--space-4);background:var(--color-purple-darker);color:var(--color-white);border:none;border-radius:6px;cursor:pointer;font-size:13px} .dt-scan-chunk-preview{padding:var(--space-4) var(--space-4);border-top:1px solid var(--color-border);background:var(--color-bg-elevated-cool)} .dt-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-4);background:var(--color-neutral-f5);border-top:1px solid var(--color-border);font-size:11px;color:var(--color-text-body);flex-shrink:0} /* Syntax highlighting */ .dt-hl-comment{color:#6a9955} .dt-hl-php-tag{color:#569cd6;font-weight:700} .dt-hl-variable{color:#9cdcfe} .dt-hl-keyword{color:#c586c0} .dt-hl-constant{color:#569cd6} .dt-hl-string{color:#ce9178} .dt-line-number{color:var(--color-text-muted);user-select:none} /* Diff */ .dt-diff-same{color:var(--color-text-light)} .dt-diff-removed{color:#f87171;background:rgba(248,113,113,.08)} .dt-diff-added{color:#34d399;background:rgba(52,211,153,.08)} .dt-diff-empty{color:var(--color-text-light);font-style:italic} /* Findings */ .dt-finding-list{display:flex;flex-direction:column;gap:var(--space-1)} .dt-finding-row{display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-base);border:1px solid var(--color-border);background:var(--color-white)} .dt-finding-row-warning{border-color:#b45309;background:#fffbeb} .dt-finding-row-critical{border-color:#f87171;background:var(--color-danger-bg-soft)} .dt-finding-row-info{border-color:var(--color-border);background:var(--color-white)} .dt-finding-icon{font-size:var(--text-base);flex-shrink:0;padding-top:2px} .dt-finding-body{flex:1;min-width:0} .dt-finding-meta{display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-1)} .dt-finding-line{font-family:monospace;font-size:var(--text-xs);color:var(--color-purple-darker);cursor:pointer;text-decoration:underline} .dt-finding-rule{font-size:11px;padding:1px var(--space-1);border-radius:var(--radius-sm);background:var(--color-neutral-f0);color:var(--color-text-muted)} .dt-finding-rule-warning{background:var(--color-warning-bg);color:var(--color-warning-text)} .dt-finding-rule-critical{background:var(--color-red-light-bg);color:var(--color-red-dark)} .dt-finding-severity{font-size:10px;color:var(--color-text-body-alt);text-transform:uppercase} .dt-finding-message{font-size:13px;color:var(--color-neutral-333)} .dt-finding-suggestion{font-size:var(--text-xs);color:var(--color-success-deep);margin-top:var(--space-1)} /* Status messages */ .dt-success-box{background:var(--color-success-bg);color:var(--color-success-deep);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-nochange-box{background:var(--color-warning-bg);color:var(--color-warning-text);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-result-success{background:var(--color-success-bg);color:var(--color-success-deep);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-error-msg{padding:var(--space-2) var(--space-3);background:var(--color-red-light-bg);border-radius:6px;color:var(--color-red-dark);font-size:13px} .dt-scan-loading{text-align:center;padding:var(--space-6);color:var(--color-text-body)} .dt-scan-loading-icon{font-size:32px;margin-bottom:var(--space-2)} .dt-scan-empty{text-align:center;padding:var(--space-6);color:var(--color-text-body)} .dt-scan-error{padding:var(--space-4);background:var(--color-red-light-bg);border-radius:var(--radius-base);color:var(--color-red-dark)} .dt-scan-error-detail{margin-top:var(--space-2);font-size:var(--text-xs);white-space:pre-wrap;max-height:200px;overflow:auto} .dt-scan-error-simple{padding:var(--space-4);color:var(--color-red-dark)} .dt-queue-success{background:var(--color-success-bg);color:var(--color-success-deep);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-queue-success a{color:var(--color-success-deep);font-weight:600} .dt-queue-warning{background:var(--color-warning-bg);color:var(--color-warning-text);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-queue-error{background:var(--color-red-light-bg);color:var(--color-red-dark);padding:var(--space-2) var(--space-3);border-radius:6px;font-size:13px} .dt-text-muted{color:var(--color-text-body);font-size:13px} .dt-mt-8{margin-top:var(--space-2)} .dt-chunk-title{font-size:15px;font-weight:700;margin-bottom:var(--space-1)} .dt-chunk-desc{font-size:13px;color:var(--color-neutral-666);margin-bottom:var(--space-3)} .dt-chunk-desc-highlight{background:var(--color-success-bg-pale);padding:var(--space-2) var(--space-3);border-radius:6px;color:var(--color-success-deep);font-weight:600} .dt-chunk-label{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) 0;cursor:pointer} .dt-chunk-count{color:var(--color-text-body)} .dt-chunk-auto{color:var(--color-success-deep);font-style:italic} .dt-chunk-total{font-size:var(--text-xs);color:var(--color-text-body);margin-top:var(--space-2)} .dt-chunk-actions{display:flex;gap:var(--space-2);margin-top:var(--space-3)} .dt-chunk-cancel{padding:var(--space-1) var(--space-4);background:var(--color-border);color:var(--color-neutral-333);border:none;border-radius:6px;cursor:pointer;font-size:13px} .dt-chunk-submit{padding:var(--space-1) var(--space-4);background:var(--color-purple-darker);color:var(--color-white);border:none;border-radius:6px;cursor:pointer;font-size:13px} /* Google Vitals */ .dt-vitals-scores-bar{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border)} .dt-vitals-grid{display:flex;gap:var(--space-4);flex-wrap:wrap} .dt-vitals-strategy{flex:1;min-width:280px} .dt-vitals-strategy-label{font-size:var(--text-xs);font-weight:700;margin-bottom:var(--space-2);color:var(--color-text-muted)} .dt-vitals-score-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-2)} .dt-vitals-score-item{text-align:center;min-width:70px} .dt-vitals-score-value{font-size:var(--text-lg);font-weight:700} .dt-vitals-score-label{font-size:10px;color:var(--color-text-light)} .dt-vitals-metric-row{display:flex;gap:var(--space-3);flex-wrap:wrap;padding-top:var(--space-1);border-top:1px solid var(--color-border)} .dt-vitals-metric-item{text-align:center;min-width:55px} .dt-vitals-metric-value{font-size:var(--text-sm);font-weight:600} .dt-vitals-metric-label{font-size:9px;color:var(--color-text-light)} .dt-vitals-passed-line{font-size:10px;color:var(--color-text-light);margin-top:var(--space-1)} .dt-vitals-divider{border-left:1px solid var(--color-border)} .dt-vitals-summary{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border);font-size:11px;color:var(--color-text-muted);display:flex;gap:var(--space-3);flex-wrap:wrap} .dt-vitals-env{margin-top:var(--space-1);font-size:10px;color:var(--color-text-light)} .dt-vitals-warnings{margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:var(--radius-sm);font-size:11px;color:var(--color-warning-text)} .dt-vitals-color-good{color:var(--color-success)} .dt-vitals-color-warn{color:var(--color-warning)} .dt-vitals-color-bad{color:var(--color-danger)} .dt-vitals-credits{margin-left:var(--space-2);opacity:.7} .dt-vitals-toolbar-title{font-size:var(--text-sm);font-weight:600} .dt-vitals-filters-group{margin-left:var(--space-2)} .dt-vitals-start-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-elevated-cool)} .dt-vitals-start-hint{font-size:var(--text-xs);color:var(--color-text-muted)} .dt-vitals-section-header{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);font-weight:600;font-size:var(--text-xs);cursor:pointer;display:flex;align-items:center;gap:var(--space-1)} .dt-vitals-section-header:hover{opacity:.85} .dt-vitals-section-arrow{font-size:10px} .dt-vitals-section-count{font-weight:400;color:var(--color-text-light);font-size:11px} .dt-vitals-section-template{background:var(--color-info-bg)} .dt-vitals-section-content{background:var(--color-warning-bg)} .dt-vitals-section-config{background:var(--color-danger-bg-soft)} .dt-vitals-section-rules{background:var(--color-bg-soft)} .dt-vitals-section-diagnostics{background:var(--color-success-bg-soft)} .dt-vitals-section-passed{background:var(--color-success-bg)} .dt-vitals-section-manual{background:var(--color-warning-bg)} .dt-vitals-section-default{background:var(--color-bg-elevated-cool)} .dt-vitals-rule-passed{color:var(--color-success-text)} .dt-vitals-display-passed{font-size:11px;color:var(--color-success-text)} .dt-vitals-strat-label{font-size:10px;margin-left:var(--space-1)} .dt-vitals-group-label{font-size:10px;margin-left:var(--space-1);color:var(--color-text-light)} .dt-vitals-group-purple{color:var(--color-purple-darker)} .dt-vitals-display-value{font-size:11px;color:var(--color-warning-text);margin-left:var(--space-1)} .dt-vitals-savings{font-size:11px;color:var(--color-red);margin-left:var(--space-1)} .dt-vitals-impact-high{font-size:10px;font-weight:600;color:var(--color-red);margin-left:var(--space-1)} .dt-vitals-impact-med{font-size:10px;font-weight:600;color:var(--color-warning-text);margin-left:var(--space-1)} .dt-vitals-stack-pack{font-size:11px;color:var(--color-purple-darker);padding:2px 0 2px var(--space-4)} .dt-vitals-sub-items{padding:2px 0 var(--space-1) var(--space-4)} .dt-vitals-sub-item{font-size:10px;color:var(--color-text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .dt-vitals-desc{font-size:11px;color:var(--color-neutral-666);margin-top:2px} .dt-vitals-row-diagnostic{border-left-color:var(--color-purple-darker)} .dt-vitals-rule-diagnostic{color:var(--color-purple-darker)} .dt-vitals-row-passed{border-left-color:var(--color-success)} .dt-vitals-opacity-dim{opacity:.6} .dt-vitals-summary-sep{opacity:.7} /* Error analyse */ .dt-overlay.dev-tools-split{inset:auto 0 0 auto;width:40vw;height:100vh;background:transparent;backdrop-filter:none;box-shadow:-8px 0 32px rgba(0,0,0,.15);pointer-events:none} .dev-tools-split>.dt-container{inset:0;border-radius:0;pointer-events:auto} body.dev-tools-inspecting{padding-right:40vw;transition:padding-right .2s;overflow:auto/* override inline style */!important} body.dev-tools-inspecting.dev-tools-picking *{cursor:crosshair/* override inline style */!important} body.dev-tools-inspecting .dev-tools-split *{cursor:auto/* override inline style */!important} .dt-element-highlight{outline:3px solid var(--color-red)/* override inline style */!important;outline-offset:2px/* override inline style */!important;background:rgba(220,38,38,.1)/* override inline style */!important} .dt-element-hover{outline:2px dashed #f59e0b/* override inline style */!important;outline-offset:2px/* override inline style */!important} .dt-error-panel{flex:1;min-height:0;overflow:auto;padding:0} .dt-error-instruction{padding:var(--space-4) var(--space-4);background:var(--color-danger-bg-soft);border-bottom:1px solid var(--color-red-border);color:var(--color-red-dark)} .dt-error-instruction-title{font-weight:600;font-size:var(--text-sm);margin-bottom:var(--space-1)} .dt-error-instruction-desc{font-size:var(--text-xs)} .dt-error-cancel-btn{margin-top:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--color-white);border:1px solid var(--color-red-light-border);border-radius:var(--radius-sm);font-size:11px;cursor:pointer;color:var(--color-red-dark)} .dt-error-selected-wrap{padding:var(--space-3) var(--space-4);background:var(--color-white);border-bottom:1px solid var(--color-border)} .dt-error-section-label{font-size:11px;color:var(--color-text-body);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:var(--space-1)} .dt-error-element-info{font-family:monospace;font-size:var(--text-xs);background:var(--color-neutral-f5);padding:var(--space-2) var(--space-2);border-radius:var(--radius-sm);overflow-x:auto;white-space:nowrap} .dt-error-element-action{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)} .dt-error-css-issues-wrap{padding:var(--space-3) var(--space-4);background:#fffbeb;border-bottom:1px solid var(--color-warning-border)} .dt-error-css-label{font-size:11px;color:var(--color-warning-text);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:var(--space-1)} .dt-error-css-list{display:flex;flex-direction:column;gap:var(--space-1)} .dt-error-monitor-wrap{padding:var(--space-3) var(--space-4)} .dt-error-monitor-label{font-size:11px;color:var(--color-text-body);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:var(--space-1)} .dt-error-events-list{display:flex;flex-direction:column;gap:var(--space-1);max-height:300px;overflow-y:auto} .dt-error-empty{font-size:13px;color:var(--color-text-body);padding:var(--space-3);text-align:center;background:var(--color-bg-elevated-cool);border-radius:6px} .dt-error-submit-section{padding:var(--space-3) var(--space-4);border-top:2px solid var(--color-border);background:var(--color-bg-elevated-cool)} .dt-error-textarea{width:100%;padding:var(--space-2) var(--space-2);border:1px solid var(--color-border-light);border-radius:6px;font-size:13px;resize:vertical;box-sizing:border-box;font-family:inherit} .dt-error-actions{display:flex;gap:var(--space-2);margin-top:var(--space-2)} .dt-error-cancel-bottom{padding:var(--space-2) var(--space-3);background:var(--color-white);border:1px solid var(--color-border-light);border-radius:6px;font-size:13px;cursor:pointer} .dt-error-flex-spacer{flex:1} .dt-error-submit-btn{padding:var(--space-2) var(--space-4);background:var(--color-red);color:var(--color-white);border:none;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600} .dt-error-submit-result{margin-top:var(--space-2)} .dt-error-analyzing{color:var(--color-text-body);font-size:13px} .dt-error-selected-ok-title{font-weight:600;font-size:13px;margin-bottom:var(--space-1);color:var(--color-success-text-alt)} .dt-error-selected-ok-desc{font-size:var(--text-xs);color:var(--color-text-muted)} .dt-css-issue-card{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs)} .dt-css-issue-critical{background:var(--color-red-light-bg);border:1px solid var(--color-red-border)} .dt-css-issue-warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border)} .dt-css-issue-prop{font-weight:600} .dt-css-issue-prop-critical{color:var(--color-red-dark)} .dt-css-issue-prop-warning{color:var(--color-warning-text)} .dt-css-issue-message{font-size:11px;color:var(--color-text-muted);margin-top:2px} .dt-css-issue-computed{font-family:monospace;font-size:10px;color:var(--color-text-body);margin-top:2px} .dt-error-event-card{padding:var(--space-2) var(--space-2);background:var(--color-white);border:1px solid var(--color-red-border);border-radius:var(--radius-sm);font-size:var(--text-xs)} .dt-error-event-type{font-weight:600;margin-bottom:2px} .dt-error-event-message{font-family:monospace;font-size:11px;color:var(--color-neutral-333);word-break:break-word} .dt-error-event-body{font-family:monospace;font-size:10px;color:var(--color-neutral-666);margin-top:var(--space-1);padding:var(--space-1) var(--space-1);background:var(--color-bg-elevated-cool);border-radius:3px;max-height:80px;overflow:auto} .dt-scan-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-3);background:#f0fdfa;border:1px solid #5eead4;border-radius:var(--radius-base)} .dt-page-badge--context{background:var(--color-success-deep);color:var(--color-white)} .dt-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--color-border);background:var(--color-bg-elevated-cool);padding:0 var(--space-4);flex-shrink:0} .dt-tab{padding:var(--space-2) var(--space-4);font-size:13px;font-weight:600;border:none;background:none;color:var(--color-text-body);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s} .dt-tab:hover{color:var(--color-neutral-333)} .dt-tab-active{color:var(--color-dark-navy);border-bottom-color:var(--color-dark-navy)} .dt-tab-content{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} .dt-proj-rule-btn{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);background:var(--color-border);color:var(--color-neutral-333);border:none;border-radius:6px;cursor:pointer;transition:background .15s,color .15s} .dt-proj-rule-btn:hover{background:#d5d4ca} .dt-proj-rule-btn-active{background:var(--color-dark-navy);color:var(--color-white)} .dt-proj-group-header{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0 var(--space-1);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-1);margin-top:var(--space-2)} .dt-proj-group-header:first-child{margin-top:0} .dt-proj-group-name{font-weight:600;font-size:13px;color:var(--color-neutral-333)} .dt-proj-group-count{font-size:11px;color:var(--color-text-body);background:var(--color-neutral-f0);padding:2px var(--space-2);border-radius:10px} .dt-finding-rule-info{color:var(--color-text-muted)} .dt-finding-source{font-family:'Fira Code',monospace;font-size:11px;color:var(--color-neutral-666);background:var(--color-neutral-f5);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);margin-top:var(--space-1);overflow-x:auto;white-space:pre} .ae-overflow-hidden{overflow:hidden} .ae-hidden{display:none/* override inline style */!important} /* Review bar (header — top-of-page trust strip) */ .rv-top-bar{background:var(--color-text-dark);color:var(--color-white);padding:var(--space-1) 0;font-size:var(--text-xs);text-align:center} .rv-top-bar .rv-link{color:var(--color-white);text-decoration:none} .rv-top-bar .rv-hb-score{color:var(--color-star-gold);background-color:var(--color-text-dark);font-weight:800;font-size:var(--text-sm)} .rv-top-bar .rv-hb-star{color:var(--color-star-gold);background-color:var(--color-text-dark);margin-left:var(--space-1)} .rv-top-bar .rv-hb-star-solo{color:var(--color-star-gold)} /* Frontend icon system — colored SVG icons */ .fi{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex-shrink:0;overflow:hidden} .fi svg{width:18px;height:18px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none} .fi-sm{width:20px;height:20px;border-radius:6px;overflow:hidden} .fi-sm svg{width:14px;height:14px} .fi-green{background:var(--pl);color:var(--p)} .fi-blue{background:var(--color-purple-bg);color:var(--color-link-blue)} .fi-amber{background:var(--color-warning-bg);color:var(--color-warning-text)} .fi-purple{background:var(--color-purple-bg);color:var(--color-purple)} .fi-rose{background:var(--color-danger-bg-soft);color:var(--color-red)} .fi-teal{background:var(--pl);color:var(--color-accent-teal)} .fi-white{background:rgba(255,255,255,.15);color:var(--color-white)} .fi-inline{width:auto;height:auto;background:none;border-radius:0;vertical-align:-2px;margin-right:4px;overflow:visible} .fi-inline svg{width:16px;height:16px} /* Owner CTA box (nav dropdown) */ .owner-cta-box{margin-top:var(--space-3);padding:var(--space-3);background:var(--cs);border-radius:var(--radius-base)} .owner-cta-title{font-size:var(--text-xs);font-weight:700;color:var(--cm);margin-bottom:var(--space-1)} .owner-cta-text{font-size:11px;color:var(--cm);line-height:1.5;margin-bottom:var(--space-2)} .owner-cta-btn{display:block;text-align:center;padding:var(--space-2) var(--space-3);background:var(--p);color:var(--color-white);border-radius:7px;font-size:var(--text-xs);font-weight:700;text-decoration:none} /* Admin edit button (frontend — floating bar) */ .admin-edit-bar{position:fixed;top:var(--space-2);right:var(--space-4);z-index:1060;display:flex;gap:var(--space-2);align-items:center} .admin-edit-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-4);background:var(--color-link-blue);color:var(--color-white);border-radius:var(--radius-base);font-size:var(--text-xs);font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2)} .admin-edit-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none} .admin-edit-btn:hover{background:var(--color-purple-dark)} /* Account dropdown login items */ .acc-login-title{font-weight:600;font-size:13px} .acc-login-sub{font-size:11px;color:var(--color-text-body)} /* Mobiel logout rood */ .mob-logout-red{color:var(--color-red)} /* Account switch widget */ .acc-sw{position:relative} .acc-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;overflow:hidden;border:1.5px solid var(--color-border);border-radius:50%;background:var(--color-white);cursor:pointer;color:var(--color-neutral-333);transition:border-color .15s,background .15s;padding:0} .acc-btn:hover{border-color:var(--color-neutral-999);background:var(--color-bg-muted)} .acc-avatar{font-size:13px;font-weight:700;color:var(--color-neutral-333)} .acc-drop{position:absolute;right:0;top:calc(100% + var(--space-2));background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:240px;z-index:500;display:none;padding:var(--space-2) 0} .acc-drop.open{display:block} .acc-head{padding:var(--space-2) var(--space-4) var(--space-1);font-size:11px;font-weight:700;color:var(--color-text-body-alt);text-transform:uppercase;letter-spacing:.06em} .acc-info{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-bg-soft);margin-bottom:var(--space-1)} .acc-name{font-weight:600;font-size:13px} .acc-role{font-size:11px;color:var(--color-text-body);margin-top:1px} .acc-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:13px;color:var(--color-neutral-333);text-decoration:none;transition:background .1s} .acc-item:hover{background:var(--color-bg-muted)} .acc-item>svg{flex-shrink:0} .acc-item-icon{font-size:18px;width:22px;flex-shrink:0} .acc-logout{color:var(--color-red)} .acc-sep{margin:var(--space-1) var(--space-4);border-top:1px solid var(--color-bg-soft)} @media(max-width:480px){.acc-sw{display:none}} /* Fallback content wrapper */ .fb-wrap{max-width:800px;margin:var(--space-6) auto;padding:0 var(--space-4)} /* Homepage */ /* Hero btns spacing */ .hero-btns{margin-top:var(--space-2)} /* AI modal */ .hp-ai-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:var(--space-4)} .hp-ai-modal.hp-hidden{display:none} .hp-ai-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .hp-ai-modal-content{position:relative;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(0,0,0,.25);width:100%;max-width:560px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column} .hp-ai-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)} .hp-ai-modal-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:700;color:var(--color-text-dark)} .hp-ai-modal-title .lucide{width:20px;height:20px;color:var(--p)} .hp-ai-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-base);border:none;background:none;cursor:pointer;color:var(--color-text-body);transition:background .15s} .hp-ai-modal-close:hover{background:var(--color-bg-soft)} .hp-ai-modal-close .lucide{width:20px;height:20px} .hp-ai-modal-body{padding:var(--space-5);overflow-y:auto} .hp-ai-modal-intro{font-size:var(--text-sm);color:var(--color-text-body);line-height:1.6;margin:0 0 var(--space-4)} .hp-ai-form{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)} .hp-ai-input{flex:1;padding:var(--space-3) var(--space-4);border:2px solid var(--color-border);border-radius:10px;font-size:var(--text-sm);color:var(--color-text-dark);outline:none;font-family:inherit;background:var(--color-white)} .hp-ai-input:focus{border-color:var(--p)} .hp-ai-input::placeholder{color:var(--color-text-body-alt)} .hp-ai-submit{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--p);color:var(--color-white);border:none;border-radius:10px;cursor:pointer;flex-shrink:0;transition:background .15s} .hp-ai-submit:hover{background:var(--pd)} .hp-ai-submit:disabled{opacity:.6;cursor:not-allowed} .hp-ai-submit .lucide{width:18px;height:18px} .hp-ai-suggestions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)} .hp-ai-sug{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:20px;font-size:var(--text-xs);color:var(--color-text-body);cursor:pointer;transition:border-color .15s,color .15s,background .15s} .hp-ai-sug:hover{border-color:var(--p);color:var(--p);background:var(--color-success-bg-soft)} /* AI resultaat */ .hp-ai-result{margin-top:var(--space-3);background:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:12px;padding:var(--space-4);font-size:var(--text-sm);line-height:1.55;color:var(--color-text-dark);text-align:left} .hp-ai-typing{display:inline-flex;gap:var(--space-1);padding:var(--space-1) 0} .hp-ai-typing span{width:8px;height:8px;overflow:hidden;background:var(--color-success);border-radius:50%;animation:hpDot .6s infinite alternate} .hp-ai-typing span:nth-child(2){animation-delay:.2s} .hp-ai-typing span:nth-child(3){animation-delay:.4s} @keyframes hpDot{to{opacity:.3;transform:translateY(-3px)}} .hp-ai-result strong{font-weight:600} .hp-ai-result a.hp-ai-venue{display:flex;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:10px;text-decoration:none;color:var(--color-text-dark);margin-top:var(--space-2);transition:all .15s} .hp-ai-result a.hp-ai-venue:hover{border-color:var(--color-success);background:var(--color-success-bg-soft)} .hp-ai-venue-img{width:64px;height:64px;border-radius:var(--radius-base);background:var(--color-bg-muted);flex-shrink:0;background-size:cover;background-position:center} .hp-ai-venue-info{flex:1;min-width:0} .hp-ai-venue-info h4{font-size:var(--text-sm);font-weight:600;margin:0 0 2px} .hp-ai-venue-info p{font-size:var(--text-xs);color:var(--color-text-body);margin:0} .hp-hidden{display:none} .hp-ai-actions{margin-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap} .hp-ai-action-btn{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-success);color:var(--color-white);border-radius:var(--radius-base);text-decoration:none;font-size:13px;font-weight:600} /* Voor eigenaren sectie */ .hp-owners{background:var(--color-text-dark);color:var(--color-white);padding:var(--space-9) var(--space-4)} .hp-owners-inner{max-width:1060px;margin:0 auto} .hp-owners-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center} .hp-owners-eyebrow{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#4ade80;margin:0 0 var(--space-3)} .hp-owners-h2{font-family:var(--ff-display);font-size:clamp(24px,4vw,36px);font-weight:400;margin:0 0 var(--space-4);line-height:1.2} .hp-owners-desc{font-size:15px;opacity:.8;line-height:1.7;margin:0 0 var(--space-5)} .hp-owners-usps{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)} .hp-owners-usp{display:flex;gap:var(--space-3);align-items:flex-start} .hp-owners-usp-ico{font-size:22px;flex-shrink:0;margin-top:2px} .hp-owners-usp-title{font-weight:700;font-size:var(--text-sm);margin-bottom:2px} .hp-owners-usp-txt{font-size:13px;opacity:.7;line-height:1.6} .hp-owners-btns{display:flex;gap:var(--space-3);flex-wrap:wrap} .hp-owners-btn-primary{padding:var(--space-3) var(--space-5);background:var(--color-success);color:var(--color-white);border-radius:10px;font-size:var(--text-sm);font-weight:700;text-decoration:none} .hp-owners-btn-secondary{padding:var(--space-3) var(--space-5);background:transparent;border:2px solid rgba(255,255,255,.35);color:var(--color-white);border-radius:10px;font-size:var(--text-sm);font-weight:700;text-decoration:none} .hp-owners-cards{display:none;grid-template-columns:1fr 1fr;gap:var(--space-3)} .hp-owners-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:var(--space-4)} .hp-owners-card-nr{font-size:var(--text-lg);font-weight:800;color:#4ade80;margin-bottom:var(--space-1)} .hp-owners-card-lbl{font-size:13px;font-weight:700;margin-bottom:var(--space-1)} .hp-owners-card-sub{font-size:11px;opacity:.6;line-height:1.5} @media(min-width:768px){ .hp-owners-grid{grid-template-columns:1fr 1fr} .hp-owners-cards{display:grid} } /* FAQ categorie pagina */ .faq-wrap{max-width:860px;margin:0 auto;padding:var(--space-6) var(--space-4) var(--space-8)} .faq-breadcrumb{font-size:var(--text-xs);color:var(--color-text-body);margin-bottom:var(--space-4)} .faq-breadcrumb a{color:var(--p);text-decoration:none} .faq-breadcrumb a:hover{text-decoration:underline} .faq-cat-head{margin-bottom:var(--space-5)} .faq-cat-head h1{font-size:var(--text-xl);font-weight:800;margin:0 0 var(--space-1)} .faq-cat-head p{font-size:var(--text-sm);color:var(--color-text-body);margin:0} .faq-list{border:1px solid var(--cb);border-radius:12px;overflow:hidden;background:var(--color-white)} .faq-item{display:block;padding:var(--space-4) var(--space-4);border-bottom:1px solid var(--color-bg-soft);text-decoration:none;color:var(--color-text-dark);transition:background .1s} .faq-item:last-child{border-bottom:none} .faq-item:hover{background:var(--cs)} .faq-item h3{font-size:15px;font-weight:600;margin:0 0 var(--space-1)} .faq-item p{font-size:13px;color:var(--color-text-body);margin:0;line-height:1.5} .faq-item-arrow{float:right;color:var(--color-text-body);font-size:18px;margin-top:var(--space-1)} .faq-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)} .faq-sub{background:var(--color-white);border:2px solid var(--cb);border-radius:10px;padding:var(--space-4);text-decoration:none;color:var(--color-text-dark);transition:all .15s} .faq-sub:hover{border-color:var(--p)} .faq-sub h3{font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-1)} .faq-sub span{font-size:var(--text-xs);color:var(--p)} .faq-sub-heading{font-size:var(--text-base);font-weight:600;margin:0 0 var(--space-3)} .faq-sidebar{margin-top:var(--space-6);padding:var(--space-4);background:var(--cs);border-radius:12px} .faq-sidebar h3{font-size:var(--text-sm);font-weight:600;margin:0 0 var(--space-3)} .faq-sidebar a{display:block;padding:var(--space-1) 0;font-size:13px;color:var(--color-text-muted);text-decoration:none} .faq-sidebar a:hover{color:var(--p)} .faq-sidebar a.active{color:var(--p);font-weight:600} .faq-empty{color:var(--cm);text-align:center;padding:var(--space-6)} .faq-hero{text-align:center;margin-bottom:var(--space-6)} .faq-hero h1{font-family:var(--ff-display);font-size:28px;font-weight:400;margin:0 0 var(--space-2)} .faq-hero p{font-size:15px;color:var(--cm);margin:0 0 var(--space-4)} .faq-search{display:flex;max-width:500px;margin:0 auto;gap:var(--space-2)} .faq-search input{flex:1;padding:var(--space-3) var(--space-4);border:2px solid var(--cb);border-radius:10px;font-size:var(--text-sm);outline:none;font-family:inherit} .faq-search input:focus{border-color:var(--p)} .faq-search button{padding:var(--space-3) var(--space-4);background:var(--p);color:var(--cw);border:none;border-radius:10px;font-size:var(--text-sm);font-weight:600;cursor:pointer} .faq-cats{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6)} @media(min-width:768px){.faq-cats{grid-template-columns:repeat(3,1fr)}} .faq-cat{background:var(--cw);border:2px solid var(--cb);border-radius:14px;padding:var(--space-5);text-decoration:none;color:var(--ct);transition:all .15s} .faq-cat:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)} .faq-cat-icon{font-size:32px;margin-bottom:var(--space-2)} .faq-cat h2{font-size:var(--text-base);font-weight:700;margin:0 0 var(--space-1)} .faq-cat p{font-size:13px;color:var(--cm);margin:0 0 var(--space-2);line-height:1.5} .faq-cat-count{font-size:var(--text-xs);color:var(--p);font-weight:600} .faq-results{margin-top:var(--space-5)} .faq-results-heading{font-size:var(--text-base);font-weight:600;margin:0 0 var(--space-3)} .faq-no-results{color:var(--cm);font-size:var(--text-sm)} .faq-result{padding:var(--space-4);border-bottom:1px solid var(--cb)} .faq-result:last-child{border-bottom:none} .faq-result a{font-size:15px;font-weight:600;color:var(--ct);text-decoration:none} .faq-result a:hover{color:var(--p)} .faq-result p{font-size:13px;color:var(--cm);margin:var(--space-1) 0 0;line-height:1.5} .faq-result-cat{font-size:11px;color:var(--cm);margin-top:var(--space-1)} /* Privacy notice bar (AVG/GDPR) — .ae-nb base in critical.css */ .ae-nb-inner{max-width:var(--mw,1200px);margin:0 auto;padding:0 var(--space-4);display:flex;align-items:center;gap:var(--space-5)} .ae-nb-text{flex:1;font-size:var(--text-sm);line-height:1.6;color:var(--ct,var(--color-text-dark))} .ae-nb-text strong{display:block;font-size:var(--text-base);margin-bottom:var(--space-1)} .ae-nb-text p{margin:0 0 var(--space-1);color:var(--cm,var(--color-neutral-666))} .ae-nb-link{color:var(--p,var(--color-success));font-size:13px;text-decoration:underline} .ae-nb-link:hover{color:var(--pd)} .ae-nb-actions{display:flex;gap:var(--space-2);flex-shrink:0} .ae-nb-btn{padding:var(--space-2) var(--space-4);border-radius:var(--radius-base);font-size:var(--text-sm);font-weight:600;cursor:pointer;border:none;white-space:nowrap} .ae-nb-btn-yes{background:var(--p,var(--color-success));color:var(--color-white)} .ae-nb-btn-yes:hover{background:var(--pd)} .ae-nb-btn-no{background:transparent;color:var(--ct,var(--color-text-dark));border:1px solid var(--cb,var(--color-border))} .ae-nb-btn-no:hover{background:var(--cs,var(--color-bg-muted))} @media(max-width:768px){ .ae-nb-inner{flex-direction:column;text-align:center} .ae-nb-actions{width:100%;flex-direction:column} .ae-nb-btn{width:100%;padding:var(--space-3)} } /* Venue detail */ :root{--vd-bg:#f5f4ef;--vd-card:#fff;--vd-border:#e8e6df;--vd-text:#1a1a1a;--vd-muted:var(--color-text-body-alt);--vd-accent:#1a7a5a;--vd-radius:16px;--vd-review-bg:#fefce8;--vd-review-text:#854d0e;--vd-review-score:#fbbf24;--vd-tag-bg:#f0fdf4;--vd-tag-text:#166534;--vd-tag-border:#bbf7d0;--vd-link:#1d4ed8} /* Sectie accordions */ .vd-section{background:var(--vd-card);border:1px solid var(--vd-border);border-radius:var(--vd-radius);margin-bottom:var(--space-3);overflow:hidden;scroll-margin-top:80px} .vd-section-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);cursor:pointer;user-select:none;transition:background .15s} .vd-section-head:hover{background:#fafaf8} .vd-section-head h2{font-size:15px;font-weight:700;margin:0;color:var(--vd-text);display:flex;align-items:center;gap:8px} .vd-section-head h2 .vd-count{font-size:var(--text-xs);font-weight:400;color:var(--vd-muted)} .vd-section-head .vd-arrow{width:20px;height:20px;color:var(--vd-muted);transition:transform .2s;flex-shrink:0} .vd-section-head .vd-arrow svg{width:20px;height:20px} .vd-section[open] .vd-arrow{transform:rotate(180deg)} .vd-section-body{padding:0 var(--space-5) var(--space-5);animation:vdSlideIn .2s ease} @keyframes vdSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} /* Intro card (altijd open, geen accordion) */ .vd-intro{background:var(--vd-card);border:1px solid var(--vd-border);border-radius:var(--vd-radius);padding:24px;margin-bottom:12px;position:relative} .vd-intro .sv-heart-detail{position:absolute;top:16px;right:16px} .vd-intro h1{font-family:var(--ff-display);font-size:26px;font-weight:400;margin:0 0 8px;color:var(--vd-text);line-height:1.2;overflow-wrap:break-word;word-wrap:break-word} .vd-intro .vd-loc{font-size:13px;color:var(--vd-muted);margin:0 0 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .vd-intro .vd-review-badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--vd-review-bg);padding:var(--space-1) var(--space-2);border-radius:20px;font-size:var(--text-xs);font-weight:600;color:var(--vd-review-text)} .vd-intro .vd-review-badge .vd-score{background:var(--vd-review-score);color:var(--color-text-dark);padding:2px var(--space-1);border-radius:var(--radius-sm);font-weight:800;font-size:13px} /* Specs grid */ .vd-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px} .vd-spec-card{background:var(--vd-bg);border-radius:var(--radius-base);padding:var(--space-2) var(--space-3)} .vd-spec-card .vd-spec-label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--vd-muted);font-weight:600} .vd-spec-card .vd-spec-val{font-size:15px;font-weight:700;color:var(--vd-text);margin-top:2px} /* Kenmerken tags */ .vd-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-3)} .vd-tag{padding:var(--space-1) var(--space-3);border-radius:20px;font-size:var(--text-xs);font-weight:600;background:var(--vd-tag-bg);color:var(--vd-tag-text);border:1px solid var(--vd-tag-border)} /* Beschrijving */ .vd-desc{font-size:var(--text-sm);line-height:1.7;color:var(--vd-text)} .vd-desc p{margin:0 0 12px} /* Veldgroep items */ .vd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px} .vd-item{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid #f8f7f3;font-size:13px;gap:12px} .vd-item:last-child{border-bottom:none} .vd-item-label{color:var(--vd-muted);flex-shrink:0} .vd-item-val{font-weight:600;color:var(--vd-text);text-align:right} .vd-check{color:var(--vd-accent);font-weight:700} .vd-link{color:#1d4ed8;text-decoration:none;font-weight:500;font-size:12px} .vd-link:hover{text-decoration:underline} /* Stekken kaarten */ .vd-peg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-2);margin-bottom:var(--space-4)} .vd-peg{background:var(--vd-bg);border:1px solid var(--vd-border);border-radius:10px;overflow:hidden;transition:box-shadow .15s} .vd-peg:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)} .vd-peg-img{height:90px;overflow:hidden;background:linear-gradient(135deg,#e5e4da,#f0efe9)} .vd-peg-img img{width:100%;height:100%;object-fit:cover} .vd-peg-num{height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#ccc} .vd-peg-info{padding:var(--space-2) var(--space-2)} .vd-peg-name{font-size:var(--text-xs);font-weight:600;display:flex;justify-content:space-between;align-items:center} .vd-peg-type{font-size:9px;padding:1px var(--space-1);border-radius:var(--radius-base);font-weight:600} .vd-peg-type.double{background:#dbeafe;color:#1d4ed8} .vd-peg-type.single{background:#fef3c7;color:#92400e} .vd-peg-desc{font-size:11px;color:var(--vd-muted);margin:var(--space-1) 0 0;line-height:1.3} .vd-peg-price{font-size:var(--text-xs);font-weight:700;color:var(--vd-accent);margin:var(--space-1) 0 0} .vd-peg-price small{font-size:10px;color:var(--vd-muted);font-weight:400} /* Foto galerij */ .vd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px} .vd-gallery-item{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-base);border:1px solid var(--vd-border);cursor:pointer;transition:transform .15s} .vd-gallery-item:hover{transform:scale(1.02)} .vd-gallery-item img{width:100%;height:100%;object-fit:cover} /* Sidebar */ .vd-sidebar{position:sticky;top:80px} .vd-sidebar .bbox{background:var(--vd-card);border:1px solid var(--vd-border);border-radius:var(--vd-radius);padding:var(--space-4);margin-bottom:12px} .vd-price{font-size:28px;font-weight:800;color:var(--vd-text);line-height:1.1} .vd-price small{font-size:13px;font-weight:400;color:var(--vd-muted);display:block;margin-top:2px} .vd-price-season{font-size:var(--text-xs);color:var(--vd-muted);margin-top:4px} .btn-book{display:block;text-align:center;padding:var(--space-3);background:var(--vd-accent);color:#fff;border-radius:var(--radius-base);font-size:var(--text-sm);font-weight:700;text-decoration:none;margin:var(--space-3) 0 var(--space-2);transition:background .15s} .btn-book:hover{background:#178a64} .btn-contact-sm{display:block;text-align:center;padding:var(--space-2);background:var(--vd-bg);color:var(--vd-text);border-radius:var(--radius-base);font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--vd-border);transition:background .15s} .btn-contact-sm:hover{background:#f0efe9} /* Sidebar specs */ .vd-side-spec{display:flex;justify-content:space-between;padding:var(--space-2) 0;font-size:13px;border-bottom:1px solid #f8f7f3} .vd-side-spec:last-child{border-bottom:none} .vd-side-spec-l{color:var(--vd-muted)} .vd-side-spec-v{font-weight:600;color:var(--vd-text)} .vd-side-badge{background:#f0fdf4;color:#166534;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600} /* Vissoorten */ .vd-fish{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px} .vd-fish-tag{padding:var(--space-1) var(--space-2);border-radius:12px;font-size:11px;background:#eff6ff;color:#1d4ed8;font-weight:500} /* Sidebar kaart */ .vd-sidebar-map{border-radius:var(--vd-radius);overflow:hidden;border:1px solid var(--vd-border);margin-bottom:12px} .vd-sidebar-map iframe{width:100%;height:200px;border:none;display:block} /* Layout */ .vd-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--space-4);align-items:start;overflow-wrap:break-word;word-wrap:break-word} @media(max-width:1024px){ .vd-layout{grid-template-columns:1fr} .vd-sidebar{position:static} } /* Breadcrumb */ .vd-bc{font-size:var(--text-xs);color:var(--vd-muted);margin-bottom:16px;display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap} .vd-bc a{color:var(--vd-muted);text-decoration:none} .vd-bc a:hover{color:var(--vd-text)} /* Peg map */ .vd-peg-map{height:340px;border-radius:10px;border:1px solid var(--vd-border)} .vd-peg-marker{width:28px;height:28px;border-radius:50%;color:var(--color-white);background:var(--vd-accent);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;border:2px solid var(--color-white);box-shadow:0 2px 6px rgba(0,0,0,.4)} .vd-peg-popup{min-width:180px} .vd-peg-popup img{width:100%;max-height:120px;object-fit:cover;border-radius:6px;margin-bottom:4px} .vd-peg-popup-desc{font-size:11px;color:var(--color-neutral-666);margin:var(--space-1) 0 0} .vd-peg-popup-price{font-size:var(--text-xs);font-weight:600;color:var(--vd-accent);margin:var(--space-1) 0 0} .vd-peg-popup-btn{margin-top:var(--space-1);width:100%;padding:var(--space-2);background:var(--vd-accent);color:#fff;border:none;border-radius:6px;font-size:var(--text-xs);font-weight:600;cursor:pointer} /* Bereikbaarheid map */ .vd-map-frame{height:280px;border-radius:10px;border:1px solid var(--vd-border);overflow:hidden} /* Review helpers */ .vd-review-actions{display:flex;justify-content:flex-end;margin-bottom:12px} .vd-review-empty{padding:24px;text-align:center;color:var(--color-text-light);font-size:13px} .vd-review-empty-link{color:var(--vd-accent);font-weight:600;text-decoration:none} /* Sidebar review score */ .vd-sidebar-review{display:flex;align-items:center;gap:8px;margin:12px 0;padding:var(--space-2) 0;border-bottom:1px solid var(--vd-border)} .vd-sidebar-score{background:var(--color-search-gold);color:var(--color-text);padding:4px 8px;border-radius:6px;font-size:var(--text-base);font-weight:800;box-shadow:0 1px 4px rgba(230,184,0,.35)} /* Contact sectie sidebar */ .vd-contact-section{margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--vd-border);font-size:var(--text-xs);color:var(--vd-muted)} .vd-contact-link{color:#1d4ed8;text-decoration:none} /* Sidebar secties */ .vd-specs-section{margin-top:var(--space-3);border-top:1px solid var(--vd-border);padding-top:var(--space-3)} .vd-fish-section{margin-top:12px;border-top:1px solid var(--vd-border);padding-top:10px} .vd-fish-label{font-size:11px;color:var(--vd-muted);margin-bottom:6px} /* Informatie-aanvraag modaal */ .ae-inq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:none;align-items:center;justify-content:center;padding:var(--space-4);animation:aeInqFade .2s ease} .ae-inq-overlay.ae-inq-visible{display:flex} @keyframes aeInqFade{from{opacity:0}to{opacity:1}} .ae-inq-modal{background:#fff;border-radius:var(--radius-lg);max-width:520px;width:100%;padding:var(--space-5);position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} .ae-inq-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;cursor:pointer;color:var(--color-text-light);line-height:1;padding:var(--space-1) var(--space-2);border-radius:6px} .ae-inq-close:hover{color:#111;background:#f5f4f0} .ae-inq-modal h3{font-size:19px;font-weight:700;margin:0 0 4px;color:#111} .ae-inq-sub{font-size:13px;color:var(--color-text-light);margin:0 0 18px} .ae-inq-row{margin-bottom:14px} .ae-inq-row label{display:block;font-size:var(--text-xs);font-weight:600;color:#444;margin-bottom:5px} .ae-inq-row input,.ae-inq-row select,.ae-inq-row textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid #d8d6cc;border-radius:var(--radius-base);font-size:var(--text-sm);font-family:inherit;background:#fff} .ae-inq-row input:focus,.ae-inq-row select:focus,.ae-inq-row textarea:focus{outline:none;border-color:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,.12)} .ae-inq-row textarea{resize:vertical;min-height:100px} .ae-inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ae-inq-hint{display:block;font-size:11px;color:var(--color-text-light);margin-top:4px} .ae-inq-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:18px} .ae-inq-btn{padding:var(--space-2) var(--space-5);border-radius:var(--radius-base);font-size:var(--text-sm);font-weight:600;cursor:pointer;border:none;font-family:inherit} .ae-inq-btn-pri{background:#1D9E75;color:#fff} .ae-inq-btn-pri:hover{background:#178a64} .ae-inq-btn-pri:disabled{background:#9ca3af;cursor:wait} .ae-inq-btn-sec{background:#f3f3f0;color:#333;border:1px solid #e5e4da} .ae-inq-btn-sec:hover{background:#e8e8e3} .ae-inq-result{margin-top:var(--space-3);font-size:13px;text-align:center} .ae-inq-result.success{color:#166534} .ae-inq-result.error{color:#991b1b} .ae-inq-body-locked{overflow:hidden} @media (max-width:480px){.ae-inq-grid{grid-template-columns:1fr}.ae-inq-modal{padding:20px}} /* Save / Bucket list button (venue detail sidebar) */ .sv-detail-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-1);width:100%;padding:var(--space-3);border:1px solid var(--color-border);background:var(--color-white);color:var(--color-text-dark);border-radius:var(--radius-base);font-size:var(--text-sm);font-weight:500;cursor:pointer;margin-top:8px;transition:background .15s,border-color .15s,color .15s} .sv-detail-btn:hover{background:var(--color-bg-soft);border-color:var(--color-text-muted)} .sv-detail-btn svg{flex-shrink:0;transition:fill .2s,stroke .2s} .sv-detail-btn.sv-active{background:var(--color-danger-bg-soft);border-color:var(--color-red-light-border);color:var(--color-red)} .sv-detail-btn.sv-active svg{fill:var(--color-red);stroke:var(--color-red)} /* Toast notification */ .sv-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--color-text-dark);color:var(--color-white);padding:12px 24px;border-radius:10px;font-size:var(--text-sm);font-weight:500;z-index:var(--z-toast,1300);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s;box-shadow:0 8px 32px rgba(0,0,0,.18);display:flex;align-items:center;gap:8px;max-width:90vw;text-align:center} .sv-toast.sv-toast-visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto} .sv-toast svg{flex-shrink:0} /* Saved venues page (customer portal) */ .sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:16px} .sv-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;transition:box-shadow .25s,transform .25s} .sv-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)} .sv-card-img{aspect-ratio:3/2;overflow:hidden;background:var(--color-bg-soft);position:relative} .sv-card-img img{width:100%;height:100%;object-fit:cover} .sv-card-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(0,0,0,.15);background:linear-gradient(135deg,var(--color-bg-soft),var(--color-border))} .sv-card-body{padding:16px} .sv-card-title{font-family:var(--ff-display);font-size:17px;font-weight:400;margin:0 0 4px;line-height:1.3;color:var(--color-text-dark)} .sv-card-meta{font-size:var(--text-xs);color:var(--color-text-light);margin-bottom:6px} .sv-card-price{font-size:var(--text-base);font-weight:700;color:var(--color-success)} .sv-card-price small{font-size:11px;font-weight:400;color:var(--color-text-light)} .sv-card-actions{display:flex;gap:8px;margin-top:10px} .sv-card-btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-base);font-size:var(--text-xs);font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .15s} .sv-card-btn-pri{background:var(--color-success);color:var(--color-white)} .sv-card-btn-pri:hover{background:var(--color-success-deep)} .sv-card-btn-del{background:var(--color-danger-bg-soft);color:var(--color-red-dark);border:1px solid var(--color-red-light-border)} .sv-card-btn-del:hover{background:var(--color-red-light-bg)} .sv-empty{text-align:center;padding:48px 24px;color:var(--color-text-light)} .sv-empty-icon{font-size:var(--text-4xl);margin-bottom:12px;opacity:.4} .sv-empty-text{font-size:15px;margin-bottom:16px} .sv-empty-cta{display:inline-block;padding:var(--space-2) var(--space-5);background:var(--color-success);color:var(--color-white);border-radius:var(--radius-base);text-decoration:none;font-weight:600;font-size:var(--text-sm)} .sv-empty-cta:hover{background:var(--color-success-deep)} @media(max-width:768px){.sv-grid{grid-template-columns:1fr 1fr;gap:14px}} @media(max-width:480px){.sv-grid{grid-template-columns:1fr;gap:12px}}