/* 3.5.94: finishing layer for the existing navy/orange identity.
No external fonts, replacement images, hidden controls or route changes. */
:root{
--aoh-navy:#102f4b;--aoh-blue:#164f80;--aoh-orange:#d94d08;
--aoh-ink:#20344a;--aoh-muted:#586c80;--aoh-line:#dfe6ed;
--aoh-soft:#f5f8fb;--aoh-cream:#faf8f4;
--ink:var(--aoh-ink);--muted:var(--aoh-muted);--line:var(--aoh-line);
--blue:var(--aoh-blue);--orange:var(--aoh-orange);--bg:var(--aoh-soft);
}
body{-webkit-font-smoothing:antialiased;line-height:1.5;text-rendering:optimizeLegibility}
h1,h2,h3,h4{line-height:1.2;text-wrap:balance}
p{overflow-wrap:break-word}
::selection{background:#ffd6b8;color:#102f4b}
.header{box-shadow:0 3px 16px #173b5f08;border-bottom-color:#e5ebf1}
.header .nav{align-items:center;gap:22px}
.nav a{padding-block:10px;transition:color .16s ease}
.nav a.active{color:var(--aoh-blue);text-decoration:none}
.topbar{letter-spacing:.01em}
.btn{min-height:44px;line-height:1.25;font-weight:750;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn-orange{background:var(--aoh-orange);box-shadow:0 3px 8px #9d380918}
.btn-orange:hover{background:#bf4105;box-shadow:0 5px 13px #9d380926}
.btn-blue{background:var(--aoh-blue)}
.btn-outline{border-color:#b8c8d7;color:#173e61}
.btn-outline:hover{background:#f1f6fa;border-color:#7594af}
.btn:disabled,button:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #1263a0!important;outline-offset:3px}
.field{background:#fff;border-color:#d4dfe8;transition:border-color .16s ease,box-shadow .16s ease}
.field:focus-within{border-color:#3075a7;box-shadow:0 0 0 3px #2474b014}
.field input,.field select{box-shadow:none}
.formgrid input,.formgrid select,.formgrid textarea{padding:12px 14px;border:1px solid #cbd8e3}
input::placeholder,textarea::placeholder{color:#6a7d8e}
input[type=checkbox],input[type=radio]{accent-color:var(--aoh-blue)}
.smart-suggest{border:1px solid #d6e2eb;box-shadow:0 12px 28px #173b5f18}
.smart-option{padding:12px 14px}
.smart-option:hover,.smart-option:focus-visible{background:#eff5fa}
.da-hero{background:linear-gradient(115deg,#092b46,#12486c)!important}
.da-copy h1{letter-spacing:-1.4px!important;line-height:1.1!important}
.da-copy>p{line-height:1.65!important;max-width:38em}
.da-points{gap:10px 18px}
.da-points span{line-height:1.5;font-weight:600}
.da-search{border:1px solid #e0e8ee!important;box-shadow:0 14px 34px #173b5f15!important;border-radius:18px!important}
.da-search label{color:#2b435b;font-size:13px;letter-spacing:.015em}
.da-sectionhead h2,.section-head h2{letter-spacing:-.65px;line-height:1.2}
.da-sectionhead>button{color:var(--aoh-blue);font-weight:700;min-height:44px}
.da-cat{border-color:#dce5ed!important;box-shadow:0 3px 12px #14395706!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.da-cat:hover{transform:translateY(-3px);border-color:#97b1c8!important;box-shadow:0 9px 22px #14395713!important}
.da-cat-label{color:#203e59;line-height:1.25}
.da-collage-clean .da-photo-label{right:10px!important;left:10px!important;white-space:normal!important;overflow-wrap:break-word;line-height:1.25!important}
.p31-allgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.p31-allcard{min-width:0;gap:12px}
.p31-allcard b{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.card,.box,.gallery{border-color:var(--aoh-line)!important;box-shadow:0 5px 20px #173b5f08!important}
.value p,.plan li,.pagehero p{line-height:1.65}
.pagehero h1,.pagehero h2,.hero h1,.hero h2{color:#fff}
.pagehero{background:linear-gradient(115deg,#102f4b,#174e79)}
.searchbar2{box-shadow:0 4px 16px #173b5f07;padding:12px;gap:10px}
.resulttop h2,.profilehead h1{letter-spacing:-.5px}
.company-main h3{line-height:1.3;font-size:21px}
.company-main .meta{line-height:1.65}
.company-actions{gap:9px}
.pill{border:1px solid #dce7f2;background:#f0f5fb;color:#315676}
.pill.pro{border-color:#cce7d7}.pill.premium{border-color:#efdcb8}
.side h3,.box h3{margin-top:0}
.notice{padding:14px 16px;border:1px solid #eedebc;border-radius:12px;background:#fffaf0;color:#66502a;line-height:1.6}
.empty{padding:40px 24px}
.plan{padding:28px}.plan .price{letter-spacing:-1px;font-variant-numeric:tabular-nums}
.plan li{padding-block:3px}
.plan.feature{border-color:var(--aoh-orange)!important}
.authcard{box-shadow:0 12px 36px #173b5f0d!important;padding:30px}
.dashboard{background:var(--aoh-soft)}
.dashmain{min-width:0}
.sidenav button{line-height:1.35;min-height:44px}
.sidenav button:not(.active):hover{background:#edf4fa;color:#173e61}
.sidenav button.active{box-shadow:0 3px 9px #173b5f12}
.table th,.business-admin-table th{color:#4c657b;font-size:12px;letter-spacing:.02em}
.table td,.business-admin-table td{line-height:1.55;vertical-align:top}
.table tbody tr:hover,.business-admin-table tr:hover{background:#f8fafc}
.quick-actions{gap:9px;flex-wrap:wrap}
#sourceRecoveryPanel>form{margin:18px 0;padding:18px;border:1px solid #dfe7ee;border-radius:12px;background:#f8fafc}
#sourceRecoveryPanel input[type=password]{display:block;width:min(100%,460px);padding:10px 12px;margin:8px 0 12px;border:1px solid #c7d6e2}
#sourceRecoveryPanel input[type=number]{width:90px;padding:8px;margin:8px}
#sourceRecoveryPanel details{margin-block:10px}
#sourceRecoveryPanel summary{padding:11px 12px;cursor:pointer;border-radius:9px;background:#f0f5f9;color:#214666;line-height:1.5}
#sourceRecoveryPanel summary:hover{background:#e8f0f7}
#sourceRecoveryPanel pre{padding:12px;background:#f5f8fb;border-radius:8px;font-size:12px;line-height:1.6}
#sourceRecoveryPanel p,#sourceRecoveryPanel td{overflow-wrap:anywhere}
.footer{padding-top:44px!important}
.footer h4{color:#173d5d;font-size:14px;margin-bottom:12px}
.footer a{line-height:1.6;transition:color .15s ease}
.footer a:hover{color:#a43b09;text-decoration:underline;text-underline-offset:3px}
.copyright{line-height:1.7;color:#5b7185}
@media(max-width:900px){
.p31-allgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.header .nav{gap:14px}
.da-copy h1{letter-spacing:-1px!important}
.company-main h3{font-size:19px}
}
@media(max-width:600px){
.p31-allgrid{grid-template-columns:minmax(0,1fr)!important}
.da-copy h1{line-height:1.15!important}
.da-copy>p{font-size:15px!important;line-height:1.6!important}
.da-points{gap:8px 12px}
.da-search{border-radius:15px!important}
.da-sectionhead{gap:12px;align-items:flex-start}
.da-sectionhead h2,.section-head h2{font-size:26px}
.searchbar2{padding:10px}
.box,.value,.plan,.authcard{padding:19px}
.company-main{padding:16px}
.pagehero h1{font-size:30px}
.notice{padding:12px 14px}
.quick-actions .btn{flex:1 1 auto}
#sourceRecoveryPanel>form{padding:13px}
#sourceRecoveryPanel summary{padding:10px}
.business-admin-table{display:block;max-width:100%;overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Approved photographic hero; existing copy and category actions retained. */
.da-hero.da-hero-background{position:relative;background:#102f4b url('/assets/hero-allesoverhuren-navy.jpg') center center/cover no-repeat!important;padding:0;color:#fff}
.da-hero-centered{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px;padding-top:110px;padding-bottom:74px;gap:30px}
.da-hero-background .da-copy{width:100%;max-width:820px;text-align:center;margin:0 auto;position:relative;z-index:1}
.da-hero-background .da-copy h1{font-size:clamp(34px,4.3vw,62px);line-height:1.12;margin:0 auto 22px;max-width:820px;text-shadow:0 2px 12px #061a3066}
.da-hero-background .da-slogan{display:block;color:#ff7519!important;margin-top:8px}
.da-hero-background .da-copy>p{max-width:640px;margin:0 auto 22px;font-size:20px;line-height:1.6;color:#fff!important;text-shadow:0 1px 8px #061a30}
.da-hero-background .da-points{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px}
.da-hero-background .da-points span{color:#edf5fc!important;font-size:12px}
.da-hero-background .da-hero-qr-corner{position:absolute;top:22px;right:16px;display:flex;align-items:center;gap:10px;background:#fff;padding:8px 10px;border-radius:10px}
.da-hero-background .da-hero-qr-corner span{color:#102f4b!important;font-size:10px}
.da-hero-background .da-hero-qr-corner img{width:48px;height:48px;object-fit:contain}
.da-hero-shortcuts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.da-hero-shortcuts button{line-height:1.3;font-family:inherit;font-size:13px;font-weight:600;color:#fff;background:#102f4be6;border:1px solid #b8cfdf88;border-radius:100px;padding:12px 17px;min-height:44px;cursor:pointer}
.da-hero-shortcuts button:hover{background:#164f80;border-color:#fff}
.da-hero-shortcuts button:focus-visible{outline:3px solid #ff9a4b;outline-offset:3px}
@media(max-width:600px){.da-hero.da-hero-background{background-position:55% center}.da-hero-centered{min-height:580px;padding-top:106px;padding-bottom:62px;gap:26px}.da-hero-background .da-copy h1{font-size:35px;line-height:1.18}.da-hero-background .da-copy>p{font-size:17px}.da-hero-background .da-points{gap:8px 12px}.da-hero-background .da-points span{font-size:11px}.da-hero-shortcuts{gap:8px}.da-hero-shortcuts button{font-size:12px;padding:10px 13px}.da-hero-background .da-hero-qr-corner{top:16px;right:16px;padding:6px 8px}.da-hero-background .da-hero-qr-corner img{width:42px;height:42px}}
/* Keep the short company-registration form readable at every width. */
#companyRegistrationForm .formgrid>label{display:flex;flex-direction:column;gap:8px;min-width:0}
#companyRegistrationForm .formgrid input:not([type=checkbox]),#companyRegistrationForm .formgrid select,#companyRegistrationForm .formgrid textarea{display:block;width:100%;min-width:0;box-sizing:border-box}
#companyRegistrationForm .formgrid small{display:block;line-height:1.5;color:#52677b}
#companyRegistrationForm textarea{min-height:125px;resize:vertical}
@media(max-width:600px){.dashboard .table{display:block;max-width:100%;overflow-x:auto}.dashboard .card,.dashboard .main{min-width:0;max-width:100%}}
@media(max-width:600px){#realAnalytics .table,#integrationStatus .table{display:block;min-width:0;max-width:100%;overflow-x:auto}#realAnalytics .card,#realAnalytics .grid2{min-width:0;max-width:100%}}
/* ============================================================
3.5.118 lay-outherstel (stap 1)
Alleen plaatsing en leesbaarheid. Geen kleuren, geen typografie
van de huisstijl gewijzigd.
============================================================ */
/* 1. De footer bleef bij korte pagina's (vergelijken, afrekenen, dashboard)
halverwege het scherm hangen met wit eronder. */
#app{display:flex;flex-direction:column;min-height:100vh}
#app>.footer{margin-top:auto}
/* 2. Op telefoon waren alle footerkolommen verborgen. Daardoor waren FAQ,
Privacy, Juridisch & vertrouwen en Cookiekeuze nergens bereikbaar. */
@media(max-width:760px){
.footergrid{grid-template-columns:1fr 1fr!important;gap:20px 18px}
.footergrid>div:not(:first-child){display:block}
.footergrid>div:first-child{grid-column:1/-1}
.footer h4{margin-bottom:6px;font-size:14px}
}
/* 3. Uitgeschakelde knoppen stonden in de eigen kleur op 60% dekking met
witte tekst. Dat leest als een kapotte knop en haalt het contrast niet.
De wachtstand van de vergelijkknop blijft ongemoeid. */
.btn:disabled:not(.aoh-cmp-visit),button.btn:disabled:not(.aoh-cmp-visit){
opacity:1!important;cursor:not-allowed;transform:none;box-shadow:none;
background:#e9edf3!important;color:#6d798d!important;border:1.5px solid #d8e0e9!important}
/* 4. De meerkeuzelijst bij Bedrijf aanmelden sneed de laatste categorie
doormidden, omdat de opgelegde regelhoogte niet op de rijhoogte paste. */
.formgrid select[multiple]{line-height:1.5!important;padding:6px 8px;overflow-y:auto}
/* 5. Discovery schoof op telefoon 7px buiten beeld: de kolom mocht niet
kleiner worden dan de inhoud. */
@media(max-width:850px){
.national-config-grid{grid-template-columns:minmax(0,1fr)}
.national-config-card{min-width:0}
}
/* 6. De QR-kaart hoort rechtsboven in de hero. Een achtergebleven
position:static!important uit een oudere hero-indeling zette hem
los midden boven de titel. Tekst van 8px naar leesbaar. */
.da-hero-background .da-hero-qr-corner{position:absolute!important;top:22px!important;right:16px!important;left:auto!important;transform:none!important;z-index:9}
.da-hero-background .da-hero-qr-corner span{font-size:11px!important;line-height:1.2}
/* 7. De bedrijfskaart brak zodra er een categoriebeeld-bijschrift was.
.company is een raster van drie kolommen dat op drie kinderen rekent,
maar bij een foto levert de sjabloon er vier: ![]()
én . Het
bijschrift pikte daardoor de brede tekstkolom in, de bedrijfsnaam werd
in 150px geperst en de knoppen vielen naar een tweede rij.
Zonder foto klopte het wel, dus het viel alleen op bij echte resultaten. */
.company{grid-template-rows:1fr auto}
.company>img,.company>.company-image-fallback{grid-column:1;grid-row:1}
.company>.category-image-caption{grid-column:1;grid-row:2;margin:0}
.company>.company-main{grid-column:2;grid-row:1/-1;min-width:0}
.company>.company-actions{grid-column:3;grid-row:1/-1}
@media(max-width:900px){
.company{grid-template-rows:auto auto auto}
.company>img,.company>.company-image-fallback{grid-column:1;grid-row:1}
.company>.category-image-caption{grid-column:1;grid-row:2}
.company>.company-main{grid-column:2;grid-row:1/3}
.company>.company-actions{grid-column:1/-1;grid-row:3}
}
/* ============================================================
3.5.118 desktopschaal (stap 2)
Op desktop stond 33 verschillende tekstregels onder 13px, tot 7px aan toe.
Alleen groottes, gewichten en witruimte. Kleuren, lettertype en indeling
van de huisstijl blijven zoals ze zijn.
============================================================ */
@media(min-width:901px){
/* --- Homepage: sectiekop en categorietegels --- */
.da-sectionhead h2{font-size:26px}
.da-sectionhead button{font-size:15px}
/* Tien tegels naast elkaar lieten ~110px per tegel over; een leesbaar label
past daar niet in. Vijf bij twee geeft ruim 225px per tegel. */
.da-catgrid{grid-template-columns:repeat(5,1fr);gap:12px}
.da-cat{min-height:132px;padding:20px 12px 18px;gap:12px}
.da-cat-icon{width:54px!important;height:54px!important;flex:0 0 54px}
.da-cat svg{width:46px;height:46px}
.da-cat b,.da-cat-label{font-size:15px!important;line-height:1.3!important;min-height:0}
/* --- Homepage: voordelenbalk --- */
.da-benefitbar>div{padding:18px 20px;gap:12px}
.da-benefitbar i{width:40px;height:40px;font-size:18px}
.da-benefitbar b{font-size:15px}
.da-benefitbar span{font-size:13px;margin-top:4px}
/* --- Homepage: statistiekenbalk (vult zich naar het aantal cijfers) --- */
.da-statbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.da-statbar>div{padding:20px 12px}
.da-statbar strong{font-size:32px}
.da-statbar span{font-size:13px}
.da-stats small{font-size:12px;margin-top:10px}
/* --- Zoekbalk --- */
.da-search label{font-size:14px}
.location-resolved,.postcode-status{font-size:12px}
.da-points{font-size:14px;gap:18px}
/* --- Zoekresultaten --- */
.search-tabs button{font-size:14px;padding:10px 18px}
.filter{font-size:14px;padding:9px 14px}
.company-main h3{font-size:24px}
.ranking-proof{font-size:13px}
.search-product-proof{font-size:14px}
.category-image-caption{font-size:12px;line-height:1.45}
.pill{font-size:12px}
.meta{font-size:14px}
.selectcompare span b{font-size:15px}
.selectcompare .meta,.selectcompare span .meta{font-size:13px}
.company-actions .btn{font-size:15px;padding:12px 14px}
.sourcebadge,.audience-badge{font-size:12px}
.premium-promo-note,.pro-promo-note{font-size:12px}
.promo-ribbon{font-size:11px}
.demo-ad-badge{font-size:11px}
/* --- Zijadvertentie naast de resultaten --- */
.context-ad-title>span{font-size:11px}
.context-ad-title>b{font-size:16px}
.context-ad-title>small{font-size:12px;line-height:1.5}
.context-ad>button>b{font-size:14px}
.context-ad>button>span{width:26px;height:26px;font-size:11px}
.adcard span,.adcard small{font-size:12px}
.partnerchoice,.geo-filter{font-size:13px}
.reset-map-search,.map-help{font-size:13px}
/* --- Pakketten --- */
.plan .price small{font-size:14px}
.plan li{font-size:15px}
.tag{font-size:12px}
.bundle-label{font-size:12px}
.bundle-line{font-size:14px}
.ad-preview-promo,.ad-preview-result,.ad-preview-side{font-size:12px}
.ad-preview-heading{font-size:13px}
/* --- Footer --- */
.footer a{font-size:14px}
.footer p{font-size:14px}
.copyright{font-size:13px}
}
/* Laatste te kleine resten op desktop, zelfde behandeling. */
@media(min-width:901px){
.context-ad-slot{padding:14px}
.context-ad-slot strong{font-size:14px}
.context-ad-slot span{font-size:13px;line-height:1.5;margin:6px 0 10px}
.context-ad-slot button{font-size:14px;padding:10px 14px}
.da-hero-background .da-points span{font-size:14px}
.comparehint strong{font-size:15px}
.comparehint span{font-size:13px}
.bundle-card p{font-size:13px;line-height:1.5}
.search-product-proof strong{font-size:inherit}
.premium-promotion-strip>span{font-size:11px}
.premium-promotion-strip button{font-size:13px}
}
@media(min-width:901px){.context-ad-body p{font-size:13px;line-height:1.55}}
/* ============================================================
3.5.118 categorieënpagina (stap 3)
Het raster oogde rafelig: icoon, label en pijl hadden geen vaste rol in de
flexrij, dus de groep stond per kaart op een andere plek. De iconen in
kolom 1 stonden op x 444, 462 en 447. Nu ligt alles op één lijn.
============================================================ */
.p31-allcard{display:flex;align-items:center;gap:14px}
.p31-allcard>.p31-cat-icon{flex:0 0 52px;margin:0}
.p31-allcard>b{flex:1 1 auto;min-width:0;margin:0;text-align:left}
.p31-allcard>i{flex:0 0 auto;margin-left:auto}
@media(min-width:901px){
.p31-allcard{padding:20px}
.p31-allcard>b{font-size:16px;line-height:1.35}
}
/* ============================================================
3.5.118 stap 4 — categoriepijl en de zijkant van de zoekpagina
============================================================ */
/* De pijl op de categoriekaarten stond op 16px en verdween naast het label.
Vaste breedte, zodat alle pijlen op één lijn blijven staan. */
.p31-allcard>i{font-style:normal;color:var(--orange,#ff6800);line-height:1;
display:inline-flex;align-items:center;justify-content:center;
transition:transform .16s ease}
.p31-allcard:hover>i{transform:translateX(3px)}
@media(min-width:901px){
.p31-allcard>i{font-size:22px;width:26px;flex:0 0 26px}
}
/* De zijkant bestond uit drie blokken met drie verschillende achtergronden
en tekst van 8 tot 10px. Zelfde huisstijl, maar leesbaar en rustiger. */
@media(min-width:901px){
/* Meer breedte: op 315px brak elke zin en zelfs het knoplabel. */
.search-content-with-ads{grid-template-columns:minmax(0,1fr) 348px;gap:22px}
.context-ad-title{padding:18px 18px 16px;border-radius:14px 14px 0 0}
.context-ad-title>span{font-size:11px;letter-spacing:1.1px;margin-bottom:7px}
.context-ad-title>b{font-size:18px;line-height:1.25}
.context-ad-title>small{font-size:13px;line-height:1.55;margin-top:9px;color:#c3d2e0}
.context-ad-tabs{border-radius:0 0 14px 14px}
.context-ad>button{grid-template-columns:30px 1fr 24px;gap:12px;padding:15px 16px}
.context-ad>button>span{width:28px;height:28px;border-radius:9px;font-size:13px}
.context-ad>button>b{font-size:15px;line-height:1.3}
.context-ad>button>i{font-size:18px;width:24px;text-align:center;color:#5d7387}
.context-ad-body{padding:0 16px 16px}
.context-ad-body>p{font-size:14px;line-height:1.55;margin:0 0 12px}
.context-ad-slot{padding:16px;border-radius:11px}
.context-ad-slot strong{font-size:15px;line-height:1.3}
.context-ad-slot span{font-size:13px;line-height:1.55;margin:7px 0 13px}
.context-ad-slot button{font-size:14px;padding:11px 16px;border-radius:9px}
/* De voorbeeldadvertentie erboven in dezelfde maatvoering. */
.side .btn,aside .side .btn{white-space:normal}
}
@media(min-width:901px){
/* Het chevron-teken hing bovenin zijn vak omdat het glyph hoog in de regel zit. */
.context-ad>button>i{display:flex;align-items:center;justify-content:center;height:24px;line-height:1;align-self:center}
}
@media(min-width:901px){
/* Het teken ⌄ vult zijn regel slecht en bleef klein en hoog staan.
Zelfde betekenis, nu als scherpe chevron van gelijke dikte. */
.context-ad>button>i{font-size:0;position:relative;width:24px;height:24px;color:#5d7387}
.context-ad>button>i:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
transform:translate(-50%,-70%) rotate(45deg)}
.context-ad.open>button>i{color:#a5480d}
}
/* ============================================================
3.5.118 stap 5 — homepage
============================================================ */
@media(min-width:901px){
/* "Actueel & compleet aanbod" breekt over twee regels, waardoor die titel
11px hoger begon dan de andere drie. Boven uitlijnen houdt ze op één lijn,
ongeacht of een titel afbreekt. */
.da-benefitbar>div{align-items:flex-start}
.da-benefitbar i{margin-top:1px;flex:0 0 40px}
.da-benefitbar p{padding-top:1px}
/* De donkere voordelenbalk stond 9px boven de donkere footer en liep daar
visueel in over. */
.da-benefits{padding-bottom:44px}
}
/* Correctie op stap 1: de footer werd met margin-top:auto omlaag geduwd, maar
dat lege stuk kreeg de witte body-kleur in plaats van de achtergrond van de
pagina. Nu groeit de inhoud zelf mee, zodat de achtergrond doorloopt. */
#app>main,#app>.dashboard{flex:1 0 auto}
/* ============================================================
3.5.118 stap 6 — homepage op verzoek
============================================================ */
/* 1. De QR-kaart weer gecentreerd boven de titel, zoals hij oorspronkelijk
stond, maar op de nieuwe leesbare maat in plaats van 8px. */
.da-hero-background .da-hero-qr-corner{
position:static!important;top:auto!important;right:auto!important;left:auto!important;
margin:0 auto 4px!important;align-self:center;
padding:9px 13px!important;border-radius:12px!important;gap:12px!important}
.da-hero-background .da-hero-qr-corner img{width:64px!important;height:64px!important}
.da-hero-background .da-hero-qr-corner span{font-size:13px!important;font-weight:850!important}
@media(min-width:901px){
/* 2. De drie zoekvelden even hoog. Het postcodeveld was 89px tegen 68px,
omdat "Plaats automatisch" het vak oprekte; daardoor stond het label
21px hoger dan de andere twee. De knop was 47px en hing er los onder. */
.da-search{align-items:end}
.da-search .field{min-height:68px}
.da-search .field.location-field{min-height:68px;padding-top:8px;padding-bottom:8px;gap:2px;justify-content:center}
.da-search .field.location-field .location-resolved{min-height:0;line-height:1.3}
.da-search .btn{height:68px;min-height:68px;border-radius:10px}
/* 3. Meer lucht tussen de voordelenbalk en de footer. */
.da-benefits{padding-bottom:80px}
}
@media(min-width:901px){
/* Het invoerveld had min-height:44px; met de statusregel en padding erbij
werd het vak 80px in plaats van 68px. Alleen binnen dit ene vak lager. */
.da-search .field.location-field{padding:8px 12px;gap:2px}
.da-search .field.location-field .location-row{min-height:0}
.da-search .field.location-field input{min-height:32px!important;height:32px}
}
/* ============================================================
3.5.118 stap 7 — nieuwe secties
Homepage: "Zo werkt het" en de verhuurdersstrook.
Hoe werkt het: de vergelijktabel en het wel/niet-blok.
Alleen bestaande huisstijlkleuren, vlakke vlakken, geen gloed
en geen gekleurde schaduwen.
============================================================ */
/* --- Gedeelde sectiekop --- */
.aoh-sectionhead{max-width:720px;margin:0 0 26px}
.aoh-sectionhead h2{font-size:26px;line-height:1.25;margin:0 0 8px;color:var(--ink)}
.aoh-sectionhead p{margin:0;color:var(--muted);line-height:1.6;font-size:16px}
.aoh-kicker{display:block;font-size:12px;font-weight:900;letter-spacing:1px;
text-transform:uppercase;color:#a5480d;margin-bottom:8px}
/* --- Homepage: Zo werkt het in drie stappen --- */
.aoh-steps{padding:38px 0 8px}
.aoh-steplist{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:16px}
.aoh-step{background:#fff;border:1px solid var(--line);border-radius:16px;
padding:22px;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
box-shadow:0 4px 18px rgba(13,49,93,.05)}
.aoh-step-num{width:44px;height:44px;border-radius:12px;background:#edf4ff;
color:var(--blue);display:grid;place-items:center;font-size:19px;font-weight:900}
.aoh-step b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
.aoh-step p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
/* --- Homepage: strook voor verhuurbedrijven --- */
.aoh-vendor{padding:0 0 46px}
.aoh-vendor-card{background:#fff;border:1px solid var(--line);border-radius:18px;
padding:28px 30px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
box-shadow:0 4px 18px rgba(13,49,93,.05)}
.aoh-vendor-copy h2{font-size:24px;line-height:1.28;margin:0 0 8px;color:var(--ink)}
.aoh-vendor-copy p{margin:0;color:var(--muted);line-height:1.6;font-size:15px;max-width:640px}
.aoh-vendor-actions{display:flex;gap:10px;flex-wrap:wrap}
.aoh-vendor-actions .btn{font-size:15px;padding:13px 20px;white-space:nowrap}
/* --- Hoe werkt het: wat vergelijken we --- */
.aoh-compare-card{padding:24px}
.aoh-compare-note{background:#fff6e8;border:1px solid #f0cc94;color:#82520c;
border-radius:10px;padding:11px 14px;font-size:14px;line-height:1.5;margin:0 0 18px}
.aoh-table-wrap{overflow-x:auto}
.aoh-compare-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.aoh-compare-table th,.aoh-compare-table td{text-align:left;padding:13px 14px;
border-bottom:1px solid #edf1f5}
.aoh-compare-table thead th{background:#f7f9fc;color:#41516a;font-size:14px;
border-bottom:1px solid var(--line)}
.aoh-compare-table tbody tr:last-child td{border-bottom:0}
.aoh-compare-table td b{color:var(--ink);font-weight:800}
.aoh-compare-table td{color:#41516a}
.aoh-compare-foot{margin:18px 0 0;color:var(--muted);line-height:1.6;font-size:15px}
/* --- Hoe werkt het: wat we wel en niet zijn --- */
.aoh-trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aoh-trust{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff;
box-shadow:0 4px 18px rgba(13,49,93,.05)}
.aoh-trust b{display:block;font-size:17px;color:var(--ink);margin-bottom:7px}
.aoh-trust p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}
.aoh-trust-foot{margin-top:22px}
.aoh-trust-foot .btn{font-size:15px;padding:13px 20px}
@media(max-width:900px){
.aoh-steplist{grid-template-columns:1fr}
.aoh-vendor-card{grid-template-columns:1fr}
.aoh-trust-grid{grid-template-columns:1fr}
.aoh-sectionhead h2{font-size:22px}
.aoh-vendor-copy h2{font-size:21px}
}
/* Afstanden na het verwisselen van de twee secties: de verhuurdersstrook staat
nu boven de categorieën en "Zo werkt het" eronder, vlak voor de USP-balk. */
.aoh-vendor{padding:30px 0 10px}
.aoh-steps{padding:34px 0 30px}
/* De voordelenbalk staat nu direct onder de categorieën in plaats van onderaan,
dus de ruime ondermarge die haar van de footer moest scheiden is niet meer
nodig. "Zo werkt het" sluit de pagina nu af en krijgt die ruimte. */
@media(min-width:901px){
.da-benefits{padding:26px 0 0}
.aoh-steps{padding:34px 0 64px}
}
/* ============================================================
3.5.118 stap 10 — paginabreedte en uitlijning tekstpagina's
============================================================ */
@media(min-width:1400px){
/* Tussen de oude 1180px en de eerdere 1440px in. Niet alleen max-width:
.container,.wide zet ook width:min(100% - 28px,1180px) en die hield de
pagina anders gewoon op 1180. Groeit vloeiend mee vanaf 1400px, waar hij
nog precies 1180 is, zodat laptops houden wat ze hadden. */
.container,.wide{width:min(100% - 64px,max(1180px,78vw),1300px);max-width:1300px}
}
/* FAQ, juridisch en privacy: de kaarten stonden gecentreerd in een kolom van
900px terwijl de titel in de blauwe kop de volle containerbreedte gebruikte,
zo'n 140px verder naar links. De leeskolom houdt zijn leesbare breedte, maar
begint nu op dezelfde lijn als de titel erboven. */
@media(min-width:901px){
.container.legal-page{max-width:1300px}
.legal-page>*{max-width:900px}
}
/* ============================================================
3.5.118 MOBIEL FUNDAMENT (stap 11, punt 1)
Eén laag die mobiel van de grond af beschrijft, in plaats van zes
overlappende breekpunten die vooral desktopdelen verbergen.
Drie regels: niets onder 13px, elk raakvlak minstens 44px, en
overal dezelfde ruimtematen. Kleuren en vormtaal blijven ongewijzigd.
============================================================ */
@media(max-width:760px){
/* --- Ruimte --- */
.container{padding:0 16px}
section{padding:28px 0}
/* --- Tekstschaal --- */
.pagehero{padding:22px 0 18px}
.pagehero h1{font-size:27px;line-height:1.18}
.pagehero p{font-size:15px;line-height:1.55}
.kicker,.aoh-kicker{font-size:12px}
.section-head h2,.aoh-sectionhead h2{font-size:22px;line-height:1.25}
.section-head p,.aoh-sectionhead p{font-size:15px;line-height:1.6}
.meta{font-size:14px;line-height:1.55}
.notice{font-size:14px;line-height:1.55}
/* --- Raakvlakken: alles minstens 44px --- */
.btn{min-height:46px;font-size:15px;padding:12px 16px;border-radius:11px}
.head-actions .btn-orange{font-size:14px;padding:11px 14px;min-height:44px}
/* --- De bottom-nav is de hoofdnavigatie en stond op 9px --- */
.mobile-bottom{height:68px}
.mobile-bottom button{font-size:11px;font-weight:800;gap:4px;min-height:68px}
.mobile-bottom button i{font-size:19px;font-style:normal;line-height:1}
/* --- Footerlinks waren 21px hoog; te klein om te raken --- */
.footer a{font-size:15px;margin:0;padding:11px 0;min-height:44px;display:flex;align-items:center}
.footer h4{font-size:15px;margin-bottom:2px}
.footer p{font-size:14px;line-height:1.6}
.copyright{font-size:13px;line-height:1.6}
/* --- Homepage: hero en categorietegels --- */
.da-hero-background .da-points span{font-size:13px}
.da-sectionhead h2{font-size:22px}
.da-sectionhead button{font-size:14px;min-height:44px;padding:0 4px}
.da-cat{min-height:120px;padding:16px 8px;gap:10px}
.da-cat b,.da-cat-label{font-size:14px!important;line-height:1.3!important}
.da-cat-icon{width:46px!important;height:46px!important;flex:0 0 46px}
.da-cat svg{width:40px;height:40px}
.da-benefitbar>div{padding:16px;gap:12px}
.da-benefitbar b{font-size:15px}
.da-benefitbar span{font-size:13px;margin-top:3px}
/* --- Categorieënpagina --- */
.p31-allcard{padding:16px;gap:14px}
.p31-allcard>b{font-size:15px;line-height:1.3}
.p31-allcard>i{font-size:20px;width:24px;flex:0 0 24px}
/* --- Zoekresultaten --- */
.mobile-search-summary{padding:13px 14px}
.mobile-search-summary b{font-size:15px}
.mobile-search-summary span{font-size:13px}
.mobile-search-summary .btn{font-size:14px;padding:10px 14px;min-height:42px}
.search-tabs button{font-size:14px;padding:11px 16px;min-height:44px}
.filter{font-size:14px;padding:11px 14px;min-height:44px}
.company-main h3{font-size:19px;line-height:1.3}
.ranking-proof,.search-product-proof{font-size:13px}
.pill,.sourcebadge,.audience-badge{font-size:12px}
.selectcompare span b{font-size:15px}
.selectcompare .meta{font-size:13px}
.category-image-caption{font-size:12px}
/* Drie knoppen naast elkaar op 390px gaf labels van 10px.
Nu de hoofdknop over de volle breedte en de twee andere eronder. */
.company-actions{grid-template-columns:1fr 1fr!important;gap:8px!important}
.company-actions .btn{font-size:14px!important;padding:12px 10px!important;min-height:46px}
.company-actions .btn:first-child{grid-column:1/-1}
/* --- Nieuwe secties --- */
.aoh-step{padding:18px;gap:14px;grid-template-columns:42px 1fr}
.aoh-step-num{width:42px;height:42px;font-size:18px}
.aoh-step b{font-size:16px}
.aoh-step p,.aoh-trust p{font-size:15px}
.aoh-trust b{font-size:16px}
.aoh-vendor-card{padding:20px}
.aoh-vendor-copy h2{font-size:20px}
.aoh-vendor-copy p{font-size:15px}
.aoh-vendor-actions .btn{width:100%}
.aoh-compare-note{font-size:14px}
.aoh-compare-table{font-size:14px;min-width:460px}
.aoh-compare-table th,.aoh-compare-table td{padding:11px 12px}
.aoh-compare-foot{font-size:14px}
}
@media(max-width:760px){
/* Restanten die nog onder de ondergrens zaten. */
.comparehint{padding:14px 15px;gap:12px}
.comparehint strong{font-size:15px;line-height:1.35}
.comparehint span{font-size:13px;line-height:1.5}
.comparehint .mark{font-size:22px}
.demo-ad-badge{font-size:11px;padding:9px}
.search-product-proof strong{font-size:inherit}
.plan .price small{font-size:14px}
.tag{font-size:12px}
}
@media(max-width:760px){
/* De advertentiekolom staat op mobiel onder de resultaten en was daar
nog niet meegenomen: 8 tot 10px. */
.context-ad-title{padding:16px}
.context-ad-title>span{font-size:11px;letter-spacing:1px}
.context-ad-title>b{font-size:17px;line-height:1.3}
.context-ad-title>small{font-size:13px;line-height:1.55;margin-top:8px}
.context-ad>button{padding:14px 15px;grid-template-columns:30px 1fr 24px;gap:12px;min-height:56px}
.context-ad>button>span{width:28px;height:28px;border-radius:9px;font-size:13px}
.context-ad>button>b{font-size:15px;line-height:1.3}
.context-ad>button>i{font-size:0;position:relative;width:24px;height:24px;color:#5d7387}
.context-ad>button>i:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
transform:translate(-50%,-70%) rotate(45deg)}
.context-ad.open>button>i{color:#a5480d}
.context-ad-body{padding:0 15px 15px}
.context-ad-body>p{font-size:14px;line-height:1.55}
.context-ad-slot{padding:15px}
.context-ad-slot strong{font-size:15px}
.context-ad-slot span{font-size:13px;line-height:1.55;margin:6px 0 12px}
.context-ad-slot button{font-size:14px;padding:12px 16px;min-height:46px;border-radius:10px}
.adcard span,.adcard small{font-size:13px}
.partnerchoice,.geo-filter{font-size:13px;min-height:40px}
}
/* ============================================================
3.5.118 MOBIEL punt 2 — compacte hero, zoeken meteen in beeld
Het zoekveld begon op 774px en de zoekknop op 1070px, allebei onder
de vouw van een scherm van 844px. Op een vergelijksite moet je
kunnen zoeken zonder eerst te scrollen.
============================================================ */
@media(max-width:760px){
/* De QR-kaart "Scan voor mobiel" hoort niet op een telefoon: je bent er al.
Scheelt ook 110px voordat je iets kunt doen. */
.da-hero-background .da-hero-qr-corner{display:none!important}
/* De hero stond op 580px vaste hoogte met 106px lucht erboven. */
.da-hero.da-hero-background{padding:0}
.da-hero-centered{min-height:0;padding:26px 0 20px;gap:14px;justify-content:flex-start}
.da-hero-background .da-copy h1{font-size:31px;line-height:1.14;margin:0 auto 12px}
.da-hero-background .da-copy>p{font-size:16px;line-height:1.5;margin:0 auto 4px}
/* De vier keurmerken op één regel die meescrolt in plaats van twee regels. */
.da-hero-background .da-points{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
gap:14px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.da-hero-background .da-points::-webkit-scrollbar{display:none}
.da-hero-background .da-points span{white-space:nowrap;font-size:13px}
/* De sneltoetsen idem: één rij die meescrolt in plaats van twee rijen van 96px. */
.da-hero-shortcuts{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
gap:8px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.da-hero-shortcuts::-webkit-scrollbar{display:none}
.da-hero-shortcuts button{white-space:nowrap;flex:0 0 auto;padding:11px 15px}
/* Het zoekblok schuift over de onderrand van de hero heen. */
.da-search-zone{margin-top:-14px!important}
.da-search{padding:14px;gap:10px;border-radius:14px}
.da-search label{font-size:13px;margin-bottom:5px}
}
/* Op mobiel één zoekbalk die het bestaande zoekvenster opent, in plaats van
drie velden onder elkaar. Dat venster bestond al en werd alleen gebruikt
vanaf de resultatenpagina. Scheelt 330px voordat je iets kunt doen. */
.mobile-searchtrigger{display:none}
@media(max-width:760px){
.da-search{display:none!important}
.mobile-searchtrigger{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;
width:100%;text-align:left;cursor:pointer;font-family:inherit;
background:#fff;border:1px solid #e1e6ec;border-radius:14px;padding:13px 14px;
box-shadow:0 12px 30px rgba(7,29,53,.14);min-height:72px}
.mobile-searchtrigger .mst-icon{display:grid;place-items:center;width:42px;height:42px;
border-radius:12px;background:#eef4ff;color:var(--blue);font-size:20px}
.mobile-searchtrigger .mst-copy{min-width:0}
.mobile-searchtrigger .mst-copy b{display:block;font-size:16px;color:var(--ink);line-height:1.25}
.mobile-searchtrigger .mst-copy small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.mobile-searchtrigger .mst-go{background:var(--orange);color:#fff;border-radius:10px;
padding:11px 15px;font-size:14px;font-weight:850;white-space:nowrap}
.mobile-searchtrigger:active{background:#f7f9fc}
}
@media(max-width:760px){
/* De twee scrollrijen zijn flexkinderen van een gecentreerde kolom en liepen
daardoor aan beide kanten buiten beeld; de eerste pil was half afgesneden.
Nu vullen ze de breedte en lopen ze netjes door tot aan de schermrand. */
.da-hero-background .da-points,.da-hero-shortcuts{
align-self:stretch;width:auto;margin-inline:-16px;padding-inline:16px}
}
/* ============================================================
3.5.118 MOBIEL punt 3 — categorieënpagina
33 items in één kolom was 4939px: bijna zes schermlengtes, en elke
rij was een bijna lege balk met een pijltje rechts. Twee kolommen met
compacte tegels, plus een filterveld zodat je meestal niet hoeft te
scrollen. Het filterveld is er alleen op mobiel; desktop blijft zoals
je hem hebt goedgekeurd.
============================================================ */
.cat-filter{display:none}
.p31-allcard[hidden]{display:none!important}
@media(max-width:760px){
.cat-filter{display:block;padding:22px 0 4px}
.cat-filter-field{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;
background:#fff;border:1px solid #dde6ef;border-radius:13px;padding:0 14px;min-height:52px}
.cat-filter-field>span{color:var(--muted);font-size:18px;line-height:1}
.cat-filter-field input{border:0;outline:0;background:transparent;width:100%;
font-size:16px;color:var(--ink);min-height:50px;padding:0}
.cat-filter-field:focus-within{border-color:#9bbce4;box-shadow:0 0 0 3px #eef4ff}
.cat-filter-count{margin:9px 2px 0;font-size:13px;color:var(--muted);min-height:18px}
.cat-filter-empty{margin:14px 2px 0;font-size:15px;line-height:1.55;color:var(--muted)}
.cat-filter-empty[hidden]{display:none}
/* Twee kolommen met een staande tegel: icoon boven, naam eronder.
De pijl kan weg, want de hele tegel is aantikbaar. */
.p31-allgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px;padding:14px 0 40px}
.p31-allcard{flex-direction:column;align-items:center;justify-content:center;text-align:center;
gap:11px;padding:18px 10px;min-height:126px;border-radius:15px}
.p31-allcard>.p31-cat-icon{width:46px!important;height:46px!important;flex:0 0 46px;margin:0}
.p31-allcard>b{font-size:14px;line-height:1.3;text-align:center;flex:0 1 auto}
.p31-allcard>i{display:none}
}
@media(max-width:760px){
.p31-allcard{gap:9px;padding:15px 9px;min-height:118px}
.p31-allcard>.p31-cat-icon{width:42px!important;height:42px!important;flex:0 0 42px}
.p31-allcard>b{font-size:13.5px;line-height:1.28}
}
@media(max-width:760px){
/* Het veld tekende zijn eigen focusrand binnen het kader, wat een dubbele
rand gaf. Het kader zelf laat de focus al zien. */
.cat-filter-field input:focus,.cat-filter-field input:focus-visible{outline:none;box-shadow:none}
.cat-filter-field:focus-within{border-color:#7da6d5;box-shadow:0 0 0 3px #e8f1ff}
}
/* ============================================================
3.5.118 MOBIEL punt 4 — de bedrijfskaart in de zoekresultaten
Een kaart was 658px hoog; met veertien resultaten werd de pagina
11705px. Per resultaat zag je dus bijna een heel scherm. Compacter
zonder iets weg te laten: de foto lager, de titel op twee regels,
het vergelijkvak als één regel in plaats van een kader van 97px.
============================================================ */
@media(max-width:760px){
/* Foto van 190 naar 150. */
.company>img,.company>.company-image-fallback{height:150px!important;min-height:0!important}
/* Bijschrift compact; blijft staan, want het vertelt dat dit een
categoriebeeld is en geen foto van deze verhuurder. */
.company>.category-image-caption{padding:5px 14px;font-size:12px;line-height:1.35}
/* Titels van drie regels naar maximaal twee. */
.company-main{padding:13px 14px 12px}
.company-main h3{font-size:18px;line-height:1.28;margin:0 0 8px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Badges strakker. */
.ranking-proof{padding:5px 9px;margin:0 0 6px;line-height:1.35}
.search-product-proof{padding:6px 9px;margin:0 0 6px;line-height:1.35}
.company-main>.meta{margin:0 0 10px}
/* Het vergelijkvak was een kader van 97px met twee regels tekst.
Nu één aantikbare regel van 48px; de uitleg staat al in de balk
boven de resultaten. */
.selectcompare{margin:0;padding:10px 12px;border-radius:11px;gap:11px;min-height:48px}
.selectcompare input{width:22px;height:22px;flex:0 0 22px}
.selectcompare span b{font-size:14px}
.selectcompare span br,.selectcompare span .meta{display:none}
/* Knoppen: hoofdknop over de volle breedte, de twee andere eronder. */
.company-actions{padding:0 14px 14px!important;gap:8px!important}
.company-actions .btn{min-height:44px;font-size:14px!important;padding:10px 8px!important}
}
@media(max-width:760px){
/* Het vinkje zelf kreeg ergens min-height:44px en rekte de regel op.
Niet nodig: de hele regel is een label, dus het raakvlak is de regel. */
.selectcompare input{min-height:0!important;height:22px!important;width:22px!important;flex:0 0 22px}
}
@media(max-width:760px){
/* De hoofdknop hoort over de volle breedte; de twee andere eronder. */
.company-actions>.btn:first-child{grid-column:1/-1!important}
}
/* ============================================================
3.5.118 MOBIEL — menuknop in de header
Hoe werkt het, Adverteren, Inloggen, FAQ, Juridisch en Privacy waren
op mobiel alleen via de footer bereikbaar; op de zoekpagina dus na
duizenden pixels scrollen. De bottom-bar blijft voor de vijf
hoofdplekken, dit menu geeft toegang tot de rest.
============================================================ */
.mobile-menu-btn{display:none}
@media(max-width:760px){
.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;flex:0 0 44px;border:1px solid #dbe3ec;background:#fff;
border-radius:11px;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;padding:0}
.mobile-menu-btn:active{background:#f2f6fa}
/* Logo en aanmeldknop iets krapper, anders passen drie dingen niet naast elkaar. */
.brand{width:150px!important}
.brand img{width:150px!important}
.head-actions{gap:8px;align-items:center}
.head-actions .btn-orange{font-size:13px;padding:11px 11px}
.mobile-menu{padding:0}
.mobile-menu-card{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;
border-radius:20px 20px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom))}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;
padding:10px 2px 6px;position:sticky;top:0;background:#fff}
.mobile-menu-top h3{margin:0;font-size:18px}
.mobile-menu-close{width:40px;height:40px;border:0;background:#f1f5f9;border-radius:11px;
font-size:16px;color:#41516a;cursor:pointer}
.mobile-menu-nav{display:flex;flex-direction:column}
.mobile-menu-nav button{width:100%;text-align:left;border:0;background:none;cursor:pointer;
font-family:inherit;font-size:17px;font-weight:800;color:var(--ink);
padding:14px 2px;min-height:52px;border-bottom:1px solid #eef2f6}
.mobile-menu-nav button:last-child{border-bottom:0}
.mobile-menu-nav button:active{color:var(--blue)}
.mobile-menu-sep{height:1px;background:#e4eaf0;margin:10px 0}
.mobile-menu-sub button{font-size:15px;font-weight:700;color:#41516a;min-height:48px;padding:12px 2px}
}
@media(max-width:760px){
/* De menuknoppen staan op display:flex, dus text-align doet niets;
de uitlijning komt van justify-content. */
.mobile-menu-nav button{justify-content:flex-start!important;align-items:center}
}
/* ============================================================
3.5.118 MOBIEL — prijzenpagina
7527px, waarvan 2646px aan drie reclamekaarten. Die hebben vaste
minimumhoogtes zodat ze op desktop naast elkaar uitlijnen; gestapeld
op mobiel is dat alleen lege ruimte. De schemaatjes stonden op 10px.
============================================================ */
@media(max-width:760px){
.ad-choice-card{padding:18px}
.ad-choice-heading{min-height:0}
.ad-choice-heading h3{font-size:20px;line-height:1.28;margin:0 0 8px}
.ad-choice-heading p{font-size:15px;line-height:1.5;margin:0 0 14px}
.ad-choice-note{min-height:0;font-size:14px;line-height:1.55;margin:12px 0 14px}
.ad-choice-details>div{margin-bottom:13px}
.ad-choice-details dt{font-size:15px;margin-bottom:4px}
.ad-choice-details dd{font-size:15px;line-height:1.5}
.ad-choice-rates{padding-top:13px}
.ad-choice-rates h4{font-size:15px;margin:0 0 8px}
.ad-choice-rates>div{font-size:15px;padding:6px 0}
.ad-choice-card>.btn{font-size:15px;min-height:48px}
/* Het schemaatje mag kleiner, maar de labels moeten leesbaar. */
.ad-placement-preview{padding:12px;margin:0 0 16px}
.ad-preview-heading{font-size:13px;margin-bottom:8px}
.ad-preview-layout{min-height:104px;gap:7px}
.ad-preview-promo,.ad-preview-result,.ad-preview-side{font-size:12px;padding:5px}
/* Pakket- en bundelkaarten. */
.plan{padding:20px}
.plan li{font-size:15px;line-height:1.45;margin:8px 0}
.plan .price{font-size:34px}
.bundle-card{padding:18px}
.extras-head h2{font-size:22px;line-height:1.25}
.extras-head p{font-size:15px;line-height:1.6}
.ad-howto{padding:18px;margin-top:20px}
.ad-howto h3{font-size:19px}
.pricing-section-nav .btn{width:100%}
}
/* ============================================================
3.5.118 MOBIEL — de vergelijktabel op Hoe werkt het
Drie kolommen passen niet in 390px, dus de tabel scrolde zijwaarts
binnen zijn kader. Op mobiel per regel: waar je naar kijkt boven,
de twee verhuurders eronder naast elkaar, elk met hun eigen kopje.
============================================================ */
@media(max-width:760px){
.aoh-compare-card{padding:16px}
.aoh-table-wrap{overflow:visible}
.aoh-compare-table{min-width:0;width:100%;display:block}
.aoh-compare-table thead{display:none}
.aoh-compare-table tbody{display:block}
.aoh-compare-table tr{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;
padding:13px 0;border-bottom:1px solid #edf1f5}
.aoh-compare-table tr:last-child{border-bottom:0}
.aoh-compare-table td{display:block;padding:0;border:0;font-size:15px;line-height:1.4}
.aoh-compare-table td:first-child{grid-column:1/-1;margin-bottom:2px}
.aoh-compare-table td:nth-child(n+2):before{display:block;font-size:12px;font-weight:800;
color:var(--muted);margin-bottom:2px}
.aoh-compare-table td:nth-child(2):before{content:"Verhuurder A"}
.aoh-compare-table td:nth-child(3):before{content:"Verhuurder B"}
}
/* ============================================================
3.5.118 MOBIEL — meldingen boven de navigatiebalk
De melding stond op bottom:18px met z-index 200, terwijl de
navigatiebalk 68px hoog is en op z-index 250 staat. Elke melding
verdween dus grotendeels achter die balk.
============================================================ */
@media(max-width:760px){
.toast{left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));
z-index:300;font-size:15px;line-height:1.45;padding:14px 16px;border-radius:13px;
text-align:left;box-shadow:0 14px 40px rgba(3,18,38,.32)}
/* De vergelijkbalk verschijnt op dezelfde plek; die houdt zijn eigen hoogte
vrij zodat ze elkaar niet overlappen. */
.compare-dock{bottom:calc(80px + env(safe-area-inset-bottom))!important;z-index:290}
}
@media(max-width:760px){
/* Staat de vergelijkbalk in beeld, dan gaat de melding daarboven staan
in plaats van eroverheen. */
.toast.toast-boven-dock{bottom:calc(154px + env(safe-area-inset-bottom))}
}
/* ============================================================================
BEHEERDERSDASHBOARD
Een echte beheerconsole: donkere zijbalk in de huisstijl, brede werkruimte,
en beide kolommen beginnen op dezelfde hoogte. Gebruikt de bestaande
ontwerptokens (--aoh-*), zodat het bij de site hoort.
========================================================================= */
/* De beheerpagina mag breder dan de rest van de site: hier staan tabellen en
overzichten die ruimte nodig hebben, geen leesteksten. */
.adash-pagina{padding:0 0 64px}
.adash-pagina > .container{padding:0 24px}
.adash{
--adash-kop:64px; /* hoogte van de titelbalk, in beide kolommen gelijk */
display:grid;
grid-template-columns:268px minmax(0,1fr);
gap:24px;
align-items:start;
margin:24px 0 0;
}
/* ------------------------------------------------------------------ zijbalk */
.adash-nav{
position:sticky;
top:20px;
display:flex;
flex-direction:column;
padding:0 0 14px;
background:var(--aoh-navy);
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(11,41,65,.16);
}
.adash-navkop{
display:flex;
align-items:center;
height:var(--adash-kop);
padding:0 22px;
margin:0;
font-size:12px;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(255,255,255,.62);
border-bottom:1px solid rgba(255,255,255,.1);
}
.adash-nav .adash-link{
/* De site zet globaal justify-content:center op elke button; hier moet alles links. */
display:flex!important;
justify-content:flex-start!important;
align-items:center;
gap:13px;
width:100%;
min-height:46px;
padding:12px 22px;
margin:0;
border:0;
border-radius:0;
background:transparent;
color:rgba(255,255,255,.82);
font:inherit;
font-size:15px;
font-weight:600;
line-height:1.3;
text-align:left;
cursor:pointer;
position:relative;
transition:background .13s ease,color .13s ease;
}
.adash-nav .adash-link:first-of-type{margin-top:10px}
.adash-nav .adash-link:hover{background:rgba(255,255,255,.08);color:#fff}
.adash-nav .adash-link.is-actief{
background:rgba(255,255,255,.11);
color:#fff;
font-weight:700;
}
/* Oranje streep links markeert de actieve sectie — dezelfde accentkleur als de site. */
.adash-nav .adash-link.is-actief::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:4px;
background:var(--aoh-orange);
}
.adash-teken{
flex:0 0 20px;
font-size:15px;
line-height:1;
text-align:center;
opacity:.72;
}
.adash-link.is-actief .adash-teken{opacity:1}
.adash-navvoet{
margin-top:12px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.1);
display:flex;
flex-direction:column;
}
.adash-nav .adash-uit:hover{color:#ffb38a}
/* ------------------------------------------------------------------ werkruimte */
.adash-main{min-width:0}
.adash-sec[hidden]{display:none}
/* Titelbalk: even hoog als de kop van de zijbalk, zodat de kolommen uitlijnen. */
.adash-seckop{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
height:var(--adash-kop);
margin:0 0 20px;
padding:0 4px;
border-bottom:2px solid var(--aoh-line);
}
.adash-seckop h2{
margin:0;
font-size:25px;
font-weight:800;
line-height:1.2;
color:var(--aoh-navy);
letter-spacing:-.01em;
}
.adash-periode{display:flex;gap:8px;flex-wrap:wrap}
.btn-klein{padding:8px 14px;font-size:13.5px;line-height:1.2;min-height:38px}
/* Binnen een sectie bepaalt de sectie het ritme, niet de losse panelen. */
.adash-sec > .card{margin-top:0}
.adash-sec > .card + .card,
.adash-sec > div + .card,
.adash-sec > .card + div,
.adash-sec > div + div{margin-top:18px}
.adash-sec .card{border-radius:14px}
.adash-sec .card.box{padding:24px 26px}
/* ------------------------------------------------------------------ werklijst */
.adash-werkkop{
margin:0 0 16px;
font-size:17px;
font-weight:700;
color:var(--aoh-navy);
}
.adash-werklijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.adash-werkok{margin-top:16px;padding-top:16px;border-top:1px solid var(--aoh-line);gap:4px}
.adash-punt{
display:flex;
align-items:center;
gap:14px;
padding:15px 18px;
border:1px solid var(--aoh-line);
border-radius:12px;
background:var(--aoh-soft);
}
.adash-punttekst{flex:1;min-width:0;font-size:15.5px;line-height:1.45;color:var(--aoh-ink)}
.adash-bol{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--aoh-muted)}
.adash-punt.adash-let-op{background:#fff7ed;border-color:#f6d3ac}
.adash-punt.adash-let-op .adash-bol{background:var(--aoh-orange);box-shadow:0 0 0 4px rgba(244,91,19,.14)}
.adash-punt.adash-uit{background:#f2f6fa;border-color:#dde6ee}
.adash-punt.adash-uit .adash-bol{background:#8fa2b6}
.adash-punt.adash-ok{background:transparent;border-color:transparent;padding:6px 18px}
.adash-punt.adash-ok .adash-bol{width:8px;height:8px;flex-basis:8px;background:var(--green,#16844e)}
.adash-punt.adash-ok .adash-punttekst{color:var(--aoh-muted);font-size:14px}
.adash-alles-goed{padding:4px 0 6px}
.adash-alles-goed strong{display:block;font-size:18px;color:var(--aoh-navy)}
.adash-alles-goed p{margin:6px 0 0}
/* ------------------------------------------------------------------ kerncijfers */
.adash-kpis{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
gap:16px;
margin-top:18px;
}
.adash-kpi{
padding:20px 22px;
display:flex;
flex-direction:column;
gap:3px;
border-radius:14px;
border-top:3px solid var(--aoh-blue);
}
.adash-kpi small{
font-size:13px;
font-weight:600;
color:var(--aoh-muted);
}
.adash-kpi strong{
font-size:34px;
line-height:1.1;
font-weight:800;
color:var(--aoh-navy);
font-variant-numeric:tabular-nums;
letter-spacing:-.02em;
}
.adash-kpi .meta{font-size:12.5px}
/* ------------------------------------------------------------------ filter en paginering */
.adash-filter{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin:14px 0 18px;
padding-bottom:18px;
border-bottom:1px solid var(--aoh-line);
}
.adash-filter input[type=search]{
flex:1 1 280px;
min-width:0;
padding:12px 15px;
border:1px solid var(--aoh-line);
border-radius:10px;
font:inherit;
font-size:15px;
background:#fff;
}
.adash-filter select{
padding:12px 14px;
border:1px solid var(--aoh-line);
border-radius:10px;
font:inherit;
font-size:15px;
background:#fff;
min-height:46px;
}
.adash-filter input[type=search]:focus,
.adash-filter select:focus{
outline:2px solid var(--aoh-blue);
outline-offset:1px;
border-color:var(--aoh-blue);
}
.adash-telling{
font-size:14px;
font-weight:600;
color:var(--aoh-muted);
white-space:nowrap;
margin-left:auto;
}
.adash-pag{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.adash-pag:empty{display:none}
.adash-pagtekst{font-size:14px;color:var(--aoh-muted);font-variant-numeric:tabular-nums}
.adash-leeg{
margin:20px 0;
padding:34px;
text-align:center;
color:var(--aoh-muted);
background:var(--aoh-soft);
border-radius:12px;
font-size:15px;
}
/* De bedrijventabel: rustig raster, ruimte om te lezen. */
.business-admin-table{width:100%;border-collapse:collapse;font-size:14.5px}
.business-admin-table th{
text-align:left;
padding:11px 12px;
font-size:12px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--aoh-muted);
border-bottom:2px solid var(--aoh-line);
white-space:nowrap;
}
.business-admin-table td{padding:11px 12px;border-bottom:1px solid var(--aoh-line);vertical-align:middle}
.business-admin-table tr:last-child td{border-bottom:0}
.business-admin-table tbody tr:hover,
.business-admin-table tr:hover{background:var(--aoh-soft)}
.business-admin-table select{
padding:8px 11px;
border:1px solid var(--aoh-line);
border-radius:8px;
font:inherit;
font-size:14px;
background:#fff;
max-width:210px;
min-height:40px;
}
.business-admin-table .meta{font-size:12.5px}
/* ------------------------------------------------------------------ smal scherm */
@media (max-width:1100px){
.adash{grid-template-columns:232px minmax(0,1fr);gap:18px}
.adash-pagina > .container{padding:0 18px}
}
@media (max-width:900px){
.adash{grid-template-columns:1fr;gap:16px;--adash-kop:auto}
.adash-nav{
position:static;
flex-direction:row;
overflow-x:auto;
padding:6px;
border-radius:12px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.adash-nav::-webkit-scrollbar{display:none}
.adash-navkop{display:none}
.adash-nav .adash-link{
width:auto;
white-space:nowrap;
padding:10px 15px;
font-size:14.5px;
border-radius:9px;
min-height:42px;
}
.adash-nav .adash-link:first-of-type{margin-top:0}
.adash-nav .adash-link.is-actief::before{
left:8px;right:8px;top:auto;bottom:2px;
width:auto;height:3px;border-radius:2px;
}
.adash-navvoet{
flex-direction:row;
margin:0 0 0 6px;
padding:0 0 0 10px;
border-top:0;
border-left:1px solid rgba(255,255,255,.14);
}
.adash-seckop{height:auto;padding:0 0 14px;margin-bottom:16px}
.adash-seckop h2{font-size:21px}
.adash-sec .card.box{padding:18px}
.adash-telling{margin-left:0;width:100%}
.business-admin-table select{max-width:none;width:100%}
}
/* --- twee overschrijvingen die nodig zijn om de indeling te laten kloppen ---
1. De site zet .container{width:min(...,1300px)}. Een width wint van een
max-width, dus het beheer moet zijn eigen breedte zetten.
2. De site zet section{padding:56px 0}. Mijn secties zijn -elementen
en kregen daardoor 56px boven de titelbalk, waardoor de zijbalk en de
werkruimte niet op dezelfde hoogte begonnen. */
/* Het beheer gebruikt dezelfde paginabreedte als de rest van de site, zodat de
zijbalk links precies onder het logo begint en rechts op dezelfde lijn eindigt
als de paginatitel. */
.adash-sec{padding:0;margin:0}
/* ============================================================================
BEHEER — leesritme binnen de panelen
De panelen die business-final.js opbouwt zijn één platte reeks koppen,
alinea's en . Zonder marges lopen vier onderwerpen in elkaar over.
Hier krijgt elk onderwerp lucht en een eigen begrenzing, zonder dat de
opbouw in JavaScript hoeft te veranderen.
========================================================================= */
/* Elke h3 begint een nieuw onderwerp: ruimte erboven en een scheidingslijn. */
.adash-sec .card h3{
margin:38px 0 12px;
padding-top:26px;
border-top:1px solid var(--aoh-line);
font-size:17px;
font-weight:700;
color:var(--aoh-navy);
letter-spacing:-.005em;
}
/* De eerste kop in een paneel hoeft geen lijn en geen extra ruimte. */
.adash-sec .card > h3:first-child,
.adash-sec .card > h2 + h3{
margin-top:0;
padding-top:0;
border-top:0;
}
.adash-sec .card h2{
margin:0 0 16px;
font-size:20px;
font-weight:800;
color:var(--aoh-navy);
}
.adash-sec .card > p{
margin:0 0 14px;
line-height:1.6;
color:var(--aoh-muted);
max-width:74ch;
}
.adash-sec .card > p:last-child{margin-bottom:0}
/* Uitklapbare onderdelen worden eigen kaartjes: rand, ruimte, aanwijzer. */
.adash-sec .card details{
margin:12px 0;
border:1px solid var(--aoh-line);
border-radius:11px;
background:#fff;
overflow:hidden;
transition:border-color .13s ease,box-shadow .13s ease;
}
.adash-sec .card details:hover{border-color:#c9d6e3}
.adash-sec .card details[open]{
border-color:#c9d6e3;
box-shadow:0 1px 3px rgba(16,47,75,.06);
}
.adash-sec .card summary{
padding:15px 18px;
cursor:pointer;
font-size:15px;
font-weight:650;
color:var(--aoh-ink);
list-style:none;
display:flex;
align-items:center;
gap:10px;
}
.adash-sec .card summary::-webkit-details-marker{display:none}
/* Eigen driehoekje, zodat het in elke browser hetzelfde staat en meedraait. */
.adash-sec .card summary::before{
content:"";
flex:0 0 7px;
width:7px;height:7px;
border-right:2px solid var(--aoh-muted);
border-bottom:2px solid var(--aoh-muted);
transform:rotate(-45deg);
transition:transform .15s ease;
margin-right:2px;
}
.adash-sec .card details[open] > summary::before{transform:rotate(45deg)}
.adash-sec .card summary:hover{background:var(--aoh-soft)}
.adash-sec .card details[open] > summary{
border-bottom:1px solid var(--aoh-line);
background:var(--aoh-soft);
}
/* De inhoud van een opengeklapt onderdeel krijgt dezelfde binnenmarge. */
.adash-sec .card details > *:not(summary){
margin-left:18px;
margin-right:18px;
}
.adash-sec .card details > *:not(summary):first-of-type{margin-top:16px}
.adash-sec .card details > *:not(summary):last-child{margin-bottom:16px}
/* Knoppenrijen en formulieren. */
.adash-sec .card .quick-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 20px;
}
.adash-sec .card .formgrid{gap:14px;margin:0 0 14px}
.adash-sec .card .notice{
margin:0 0 20px;
padding:16px 18px;
border-radius:11px;
line-height:1.6;
}
.adash-sec .card .notice p{margin:0 0 8px}
.adash-sec .card .notice p:last-child{margin-bottom:0}
.adash-sec .card .business-mail-grid{margin-top:14px;gap:14px}
/* Een melding zonder tekst hoort geen lege ruimte te beslaan. */
.adash-sec .card p:empty,
.adash-sec .card div:empty{display:none}
/* --- kopniveaus: h1 pagina, h2 sectie, h3 paneel, h4 onderwerp binnen paneel --- */
.adash-sec .card h4{
margin:30px 0 10px;
padding-top:22px;
border-top:1px solid var(--aoh-line);
font-size:15.5px;
font-weight:700;
color:var(--aoh-navy);
}
.adash-sec .card > h3 + h4,
.adash-sec .card > h4:first-child{margin-top:0;padding-top:0;border-top:0}
/* De paneelkop staat nu bovenaan het paneel en heeft zelf geen lijn nodig. */
.adash-sec .card > h3:first-child{margin-top:0;padding-top:0;border-top:0}
/* --- statistieken: één raster in plaats van losse gestapelde blokken ---
De site zet .grid2 op smalle schermen op display:block; binnen het beheer
houden we een echt raster aan dat pas onder 1000px naar één kolom gaat. */
.adash-sec .admin-kpis{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
gap:14px;
margin:0 0 18px;
}
.adash-sec .grid2{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:18px;
margin-top:18px;
}
.adash-sec .grid2 > .card{margin-top:0}
.adash-sec .card.funnel{padding:22px 24px}
.adash-sec .funnel-row{margin:14px 0}
.adash-sec .funnel-label{font-size:13px;margin-bottom:6px}
.adash-sec .admin-kpi{padding:16px 18px;border-radius:12px}
.adash-sec .admin-kpi small{font-size:12.5px;color:var(--aoh-muted)}
.adash-sec .admin-kpi strong{font-size:26px;font-weight:800;color:var(--aoh-navy);font-variant-numeric:tabular-nums}
.adash-sec .table{width:100%;border-collapse:collapse;font-size:14px}
.adash-sec .table th{
text-align:left;padding:9px 10px;font-size:11.5px;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;color:var(--aoh-muted);
border-bottom:2px solid var(--aoh-line);
}
.adash-sec .table td{padding:9px 10px;border-bottom:1px solid var(--aoh-line)}
.adash-sec .table tr:last-child td{border-bottom:0}
@media (max-width:1000px){
.adash-sec .grid2{grid-template-columns:1fr}
}
/* De header gebruikte 4px binnenmarge links terwijl alle pagina-inhoud 24px
gebruikt; daardoor stond het logo 20px links van elke titel eronder. Gelijk
getrokken, zodat logo, paginatitel en dashboard op één lijn beginnen. */
header.header .wide,
.topbar .wide{padding-left:24px;padding-right:24px}
/* Binnen de gewone paginabreedte heeft de werkruimte de ruimte harder nodig
dan de zijbalk; die mag iets smaller. */
.adash{grid-template-columns:244px minmax(0,1fr);gap:20px}
@media (max-width:1100px){.adash{grid-template-columns:216px minmax(0,1fr);gap:16px}}
@media (max-width:900px){.adash{grid-template-columns:1fr}}
/* Zes kerncijfers vielen als 4+2 uit; binnen de paginabreedte staan ze
evenwichtiger in twee rijen van drie. */
.adash-kpis{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
/* ============================================================================
BEHEER — formulieren en losse onderdelen
Gemeten oorzaken:
- .pill stond in een flexrij met align-items:normal en rekte mee tot 96px
hoog; met border-radius:999px werd dat een cirkel.
- Labels met een invoerveld waren display:block, waardoor de labeltekst en
het veld op dezelfde regel over elkaar heen vielen.
- Een akkoordtekst met checkbox kromp mee in een flexrij tot 122px breed,
zodat er nog één woord per regel paste.
- Getal- en zoekvelden waren smaller dan hun eigen placeholder.
========================================================================= */
/* Een badge mag nooit meerekken met de hoogte van de rij ernaast. */
.adash-sec .pill,
.adash-sec .tag{
align-self:flex-start;
flex:0 0 auto;
white-space:nowrap;
height:auto;
}
/* Label met een invoerveld: tekst bóven het veld, veld op volle breedte. */
.adash-sec .card label:has(> input:not([type=checkbox]):not([type=radio])),
.adash-sec .card label:has(> select),
.adash-sec .card label:has(> textarea){
display:flex;
flex-direction:column;
gap:7px;
min-width:190px;
font-size:13.5px;
font-weight:600;
color:var(--aoh-ink);
}
.adash-sec .card label > input:not([type=checkbox]):not([type=radio]),
.adash-sec .card label > select,
.adash-sec .card label > textarea{
width:100%;
max-width:100%;
padding:11px 13px;
border:1px solid var(--aoh-line);
border-radius:9px;
font:inherit;
font-size:14.5px;
font-weight:400;
/* background-color, niet background: de korte schrijfwijze wist het eigen
pijltje van de keuzelijst weer uit. */
background-color:#fff;
min-height:44px;
}
.adash-sec .card label > textarea{min-height:92px;line-height:1.5}
/* Checkbox met tekst: naast elkaar, en de tekst krijgt de volle regelbreedte. */
.adash-sec .card label.choice,
.adash-sec .card label:has(> input[type=checkbox]),
.adash-sec .card label:has(> input[type=radio]){
display:flex;
flex-direction:row;
align-items:flex-start;
gap:11px;
flex:1 1 100%;
width:100%;
min-width:0;
line-height:1.55;
font-size:14.5px;
font-weight:500;
color:var(--aoh-ink);
}
.adash-sec .card label > input[type=checkbox],
.adash-sec .card label > input[type=radio]{
flex:0 0 19px;
width:19px!important;
height:19px;
min-height:0;
margin:2px 0 0;
padding:0;
}
/* Losse velden buiten een label houden dezelfde maatvoering. */
.adash-sec .card > input,
.adash-sec .card > select,
.adash-sec .card input[type=search],
.adash-sec .card input[type=number],
.adash-sec .card input[type=text]{
padding:11px 13px;
border:1px solid var(--aoh-line);
border-radius:9px;
font:inherit;
font-size:14.5px;
background:#fff;
min-height:44px;
max-width:100%;
}
/* Een veld hoort minstens zijn eigen tekst te kunnen tonen. */
.adash-sec .card input[type=number]{min-width:160px}
.adash-sec .card input[type=search]{min-width:250px}
.adash-sec .card select{min-width:180px}
.adash-sec .card input[type=file]{max-width:100%}
/* Rijen met meerdere velden lopen netjes door naar de volgende regel. */
.adash-sec .card form,
.adash-sec .card .formgrid{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:14px;
}
.adash-sec .card .formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:start}
.adash-sec .card form > button,
.adash-sec .card .formgrid > button{align-self:flex-end;flex:0 0 auto}
/* Niets mag buiten zijn kaart steken. */
.adash-sec .card{overflow-wrap:anywhere}
.adash-sec .card *{max-width:100%}
/* Melding wanneer een lijst leeg is, zodat een kopje nooit zonder uitleg staat. */
.adash-sec .card .adash-niets{
margin:0 0 6px;
padding:14px 16px;
background:var(--aoh-soft);
border:1px dashed var(--aoh-line);
border-radius:10px;
color:var(--aoh-muted);
font-size:14px;
}
/* De uploadrij bij de categoriefoto's was een raster dat vijf elementen in
even brede kolommen perste: het bestandsveld werd 22px en de akkoordtekst
180px, waardoor die op één woord per regel afbrak. Nu een rij die afbreekt,
met de akkoordtekst op een eigen volle regel. */
.adash-sec .category-upload-box{
display:flex!important;
flex-wrap:wrap;
align-items:center;
gap:12px;
}
.adash-sec .category-upload-box > select{flex:1 1 210px;min-width:200px}
.adash-sec .category-upload-box > input[type=file]{flex:1 1 250px;min-width:230px}
.adash-sec .category-upload-box > button{flex:0 0 auto}
.adash-sec .category-upload-box > label.choice,
.adash-sec .category-upload-box > p,
.adash-sec .category-upload-box > .meta{flex:1 1 100%;width:100%}
/* De lijst met categorieën en het uploadblok ernaast krijgen een vaste
verhouding in plaats van twee even brede kolommen. */
.adash-sec .image-admin-tabs{gap:20px}
/* De scheidingslijn boven een kop hoort alleen bij koppen die rechtstreeks in
het paneel staan. Een kop binnen een eigen blok (zoals "Werkelijke metingen"
naast de ECHTE DATA-badge) kreeg er anders een zwevende lijn boven. */
.adash-sec .card h3:not(.card > h3),
.adash-sec .card h4:not(.card > h4){border-top:0;padding-top:0}
.adash-sec .card > h3,
.adash-sec .card > h4{border-top:1px solid var(--aoh-line)}
.adash-sec .card > h3:first-child,
.adash-sec .card > h4:first-child,
.adash-sec .card > h3:first-of-type:not(:has(~ h3)),
.adash-sec .card > h2 + h3,
.adash-sec .card > h3 + h4{border-top:0;padding-top:0;margin-top:0}
/* Vijf kerncijfers passen op één rij binnen deze breedte. */
.adash-sec .admin-kpis{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
/* Een zoek- of filterveld mag de beschikbare regel vullen. */
.adash-sec .card input[type=search]{flex:1 1 320px;min-width:280px;max-width:520px}
/* ============================================================================
BEHEER — leesbaarheid en statuslabels
De categorierijen stonden op 10px (titel) en 8px (ondertitel), en de
voorbeeldfoto-melding op 9px. Dat is onleesbaar; hieronder op maat gebracht.
========================================================================= */
/* Categorierijen: grotere voorvertoning en leesbare tekst. */
.adash-sec .category-default-row{
grid-template-columns:104px 1fr auto;
gap:14px;
padding:10px;
border-radius:11px;
border-color:var(--aoh-line);
}
.adash-sec .category-default-preview{
width:104px;
height:70px;
border-radius:9px;
font-size:28px;
}
.adash-sec .category-default-row b{
font-size:15px;
font-weight:700;
color:var(--aoh-navy);
line-height:1.3;
}
.adash-sec .category-default-row small{
font-size:13px;
color:var(--aoh-muted);
margin-top:3px;
line-height:1.4;
}
.adash-sec .category-default-row .btn{padding:9px 16px;font-size:14px}
/* De lijst blijft scrollbaar, maar met rijen die passen bij de nieuwe maat. */
.adash-sec .image-admin-tabs > div > div[style*="overflow"]{max-height:520px}
/* De melding over de voorbeeldfoto's stond op 9px. */
.adash-sec .admin-example-folder{
margin-top:18px;
padding:16px 18px;
border-radius:11px;
font-size:14px;
line-height:1.55;
gap:10px;
flex-wrap:wrap;
align-items:baseline;
color:var(--aoh-muted);
}
.adash-sec .admin-example-folder b{
font-size:14.5px;
color:var(--aoh-navy);
white-space:nowrap;
}
.adash-sec .admin-example-folder code{
padding:2px 6px;
border-radius:5px;
background:#e8eef4;
color:var(--aoh-ink);
font-size:13px;
}
/* ------------------------------------------------------------------ statuslabels
Vervangt de emoji in de koppelingentabel. Kleur draagt de betekenis niet
alleen: het woord zelf zegt het ook, met een stip als extra signaal. */
.statuslabel{
display:inline-flex;
align-items:center;
gap:7px;
padding:5px 11px 5px 9px;
border-radius:999px;
font-size:12.5px;
font-weight:700;
letter-spacing:.01em;
white-space:nowrap;
border:1px solid transparent;
}
.statuslabel::before{
content:"";
width:7px;height:7px;
border-radius:50%;
background:currentColor;
flex:0 0 7px;
}
.statuslabel.is-ok{background:#e8f6ee;color:#15734a;border-color:#bfe4cf}
.statuslabel.is-bezig{background:#fff4e6;color:#9a5a12;border-color:#f3d7b3}
.statuslabel.is-let{background:#fdecec;color:#a33232;border-color:#f2c9c9}
.statuslabel.is-uit{background:#eef2f6;color:#5b6b7c;border-color:#dbe3ea}
.statustabel td:nth-child(2){white-space:nowrap;width:1%}
.statustabel td:first-child b{color:var(--aoh-navy)}
.statustabel td{vertical-align:middle;font-size:14px}
.statustabel td:last-child{color:var(--aoh-muted);line-height:1.5}
/* ------------------------------------------------------------------ uitlijning
Het daglimietveld stond hoger dan zijn label en de knop ernaast. */
.adash-sec .card label:has(> input[type=number]){
flex-direction:row;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.adash-sec .card label:has(> input[type=number]) > input{width:auto;flex:0 0 170px}
/* De eerste twee kolommen krimpen tot hun inhoud, de opmerking krijgt de rest.
Zonder dit brak "Echte statistieken" midden in het woord af. */
.statustabel td:first-child,
.statustabel th:first-child{white-space:nowrap;width:1%;padding-right:20px}
.statustabel td:last-child,
.statustabel th:last-child{width:auto}
/* ============================================================================
BRONMOTOR — tabbladen en filterbalk
De pagina bevatte zes onderwerpen onder elkaar. Instellingen en logboek zijn
gescheiden, en het filter staat nu bovenaan het logboek in plaats van
halverwege de pagina.
========================================================================= */
.bron-tabs{
display:flex;
gap:4px;
margin:18px 0 20px;
padding:4px;
background:var(--aoh-soft);
border:1px solid var(--aoh-line);
border-radius:11px;
width:fit-content;
max-width:100%;
flex-wrap:wrap;
}
.bron-tab{
padding:9px 20px;
border:0;
border-radius:8px;
background:transparent;
color:var(--aoh-muted);
font:inherit;
font-size:14.5px;
font-weight:650;
cursor:pointer;
min-height:40px;
transition:background .13s ease,color .13s ease;
}
.bron-tab:hover{color:var(--aoh-ink)}
.bron-tab.is-actief{
background:#fff;
color:var(--aoh-navy);
box-shadow:0 1px 3px rgba(16,47,75,.1);
}
.bron-paneel[hidden]{display:none}
/* Filterbalk: zoekveld links, keuzelijsten ernaast, wisknop pas als er iets aan staat. */
.bron-filterbalk{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin:0 0 18px;
padding:16px;
background:var(--aoh-soft);
border:1px solid var(--aoh-line);
border-radius:12px;
}
.bron-filterbalk input[type=search]{
flex:1 1 300px;
min-width:240px;
max-width:none;
}
.bron-filterbalk select{flex:0 1 210px;min-width:170px}
.bron-wis{flex:0 0 auto;margin-left:auto}
.bron-wis[hidden]{display:none}
/* Het overzicht per vergelijking staat boven de filterbalk in hetzelfde paneel. */
.bron-paneel > section{margin-bottom:20px}
/* Knop om meer logregels te tonen: gecentreerd onder de lijst. */
.bron-meer{display:block;margin:18px auto 0;min-width:240px}
/* Het overzichtsblok in het logboek is een , en de site zet daar
globaal padding:56px 0 op. Daardoor stond er ruim honderd pixel lucht boven
en onder het blok. Binnen het beheer bepaalt het paneel de ruimte. */
.adash-sec section{padding:0}
.bron-paneel > section{margin:0 0 22px}
.bron-paneel > section h4{margin:0 0 10px}
.bron-paneel > section select{margin-bottom:12px}
.bron-paneel > section > p{margin:0 0 12px}
/* De kaartjes in het overzicht en het logboek staan dichter op elkaar. */
.bron-paneel details{margin:8px 0}
.bron-paneel > div > .meta{margin:0 0 12px}
/* ============================================================================
BEHEER — afwerking van de bedieningselementen
De formulieren toonden nog de standaardonderdelen van het besturingssysteem:
grijze keuzelijsten, een Engelse bestandsknop, pijltjes bij getalvelden.
Hieronder komen ze in dezelfde vormtaal als de rest van het dashboard.
Alles blijft gewone HTML: toetsenbordbediening en schermlezers veranderen niet.
========================================================================= */
/* ---- keuzelijsten: eigen pijltje in plaats van het besturingssysteem ---- */
.adash-sec select,
.bron-filterbalk select{
-webkit-appearance:none;
appearance:none;
padding-right:40px;
background-color:#fff;
background-image:
linear-gradient(45deg,transparent 50%,#66758a 50%),
linear-gradient(135deg,#66758a 50%,transparent 50%);
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
cursor:pointer;
transition:border-color .13s ease,box-shadow .13s ease;
}
.adash-sec select:hover,
.bron-filterbalk select:hover{border-color:#b9c9d8}
.adash-sec select:focus,
.bron-filterbalk select:focus{
border-color:var(--aoh-blue);
box-shadow:0 0 0 3px rgba(22,79,128,.13);
}
.adash-sec select:disabled{background-color:var(--aoh-soft);color:var(--aoh-muted);cursor:not-allowed}
/* ---- tekst- en getalvelden: zelfde rustige focus ---- */
.adash-sec input:not([type=checkbox]):not([type=radio]):not([type=file]),
.adash-sec textarea{
transition:border-color .13s ease,box-shadow .13s ease;
}
.adash-sec input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
.adash-sec textarea:hover{border-color:#b9c9d8}
.adash-sec input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.adash-sec textarea:focus{
border-color:var(--aoh-blue);
box-shadow:0 0 0 3px rgba(22,79,128,.13);
}
.adash-sec input::placeholder,
.adash-sec textarea::placeholder{color:#93a3b3}
/* De op- en neerpijltjes bij een getalveld voegen niets toe en zagen er rommelig
uit; je typt hier gewoon een aantal. */
.adash-sec input[type=number]{-moz-appearance:textfield;appearance:textfield}
.adash-sec input[type=number]::-webkit-outer-spin-button,
.adash-sec input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* ---- bestandsveld: de keuzeknop in de huisstijl ----
De tekst ernaast ("Geen bestand gekozen") komt uit de browser en volgt de
taal van het besturingssysteem; die is niet met opmaak te veranderen. */
.adash-sec input[type=file]{
padding:7px 12px 7px 7px;
border:1px solid var(--aoh-line);
border-radius:9px;
background:#fff;
font:inherit;
font-size:14px;
color:var(--aoh-muted);
min-height:44px;
cursor:pointer;
}
.adash-sec input[type=file]::file-selector-button{
margin-right:12px;
padding:9px 16px;
border:1px solid var(--aoh-line);
border-radius:7px;
background:var(--aoh-soft);
color:var(--aoh-navy);
font:inherit;
font-size:13.5px;
font-weight:650;
cursor:pointer;
transition:background .13s ease,border-color .13s ease;
}
.adash-sec input[type=file]::file-selector-button:hover{
background:#e9eff5;
border-color:#b9c9d8;
}
.adash-sec input[type=file]:hover{border-color:#b9c9d8}
/* ---- keuzevakjes: iets groter en in de merkkleur ---- */
.adash-sec input[type=checkbox],
.adash-sec input[type=radio]{
accent-color:var(--aoh-blue);
cursor:pointer;
}
.adash-sec label:has(> input[type=checkbox]):hover,
.adash-sec label:has(> input[type=radio]):hover{color:var(--aoh-navy)}
/* ---- uitgeschakelde knoppen zien er ook uitgeschakeld uit ---- */
.adash-sec .btn:disabled,
.adash-sec button:disabled{
opacity:.55;
cursor:not-allowed;
box-shadow:none;
}
/* ---- smalle schuifbalken in de lijstjes, in plaats van de brede standaard ---- */
.adash-sec [style*="overflow"],
.adash-sec .aoh-table-wrap,
.bron-paneel{scrollbar-width:thin;scrollbar-color:#c3d0dc transparent}
.adash-sec [style*="overflow"]::-webkit-scrollbar,
.adash-sec .aoh-table-wrap::-webkit-scrollbar{width:9px;height:9px}
.adash-sec [style*="overflow"]::-webkit-scrollbar-track,
.adash-sec .aoh-table-wrap::-webkit-scrollbar-track{background:transparent}
.adash-sec [style*="overflow"]::-webkit-scrollbar-thumb,
.adash-sec .aoh-table-wrap::-webkit-scrollbar-thumb{
background:#c3d0dc;
border-radius:99px;
border:2px solid #fff;
}
.adash-sec [style*="overflow"]::-webkit-scrollbar-thumb:hover,
.adash-sec .aoh-table-wrap::-webkit-scrollbar-thumb:hover{background:#a8b9c9}
/* ---- kaarten reageren subtiel, zodat het aanvoelt als bediening ---- */
.adash-sec .category-default-row{transition:border-color .13s ease,box-shadow .13s ease}
.adash-sec .category-default-row:hover{
border-color:#c9d6e3;
box-shadow:0 1px 3px rgba(16,47,75,.07);
}
/* Het eigen pijltje van de keuzelijst werd door meerdere bestaande regels met
een background-korte-schrijfwijze overschreven. Alleen background-image
opnieuw zetten, met genoeg gewicht om te winnen zonder !important-gevecht. */
.adash-sec .card select,
.adash-sec .card label > select,
.adash-sec .category-upload-box > select,
.bron-filterbalk select,
.adash-sec .adash-filter select{
-webkit-appearance:none;
appearance:none;
padding-right:40px;
background-image:
linear-gradient(45deg,transparent 50%,#66758a 50%),
linear-gradient(135deg,#66758a 50%,transparent 50%);
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
background-size:6px 6px,6px 6px;
background-repeat:no-repeat;
}
/* De site bevat `input,select,textarea{background:#fff!important}`. Die korte
schrijfwijze zet background-image terug op none en wint van alles zonder
!important. Omdat appearance:none de systeempijl al weghaalt, bleef er een
keuzelijst zonder enig pijltje over. Daarom hier ook !important — alleen op
de afbeelding, zodat de witte achtergrond van die regel gewoon blijft gelden. */
.adash-sec select,
.bron-filterbalk select{
background-image:
linear-gradient(45deg,transparent 50%,#66758a 50%),
linear-gradient(135deg,#66758a 50%,transparent 50%)!important;
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px)!important;
background-size:6px 6px,6px 6px!important;
background-repeat:no-repeat!important;
}
/* Doorzoekbare keuzelijst: zoekveld boven de lijst, aantal treffers eronder. */
.zoekbare-lijst{display:flex;flex-direction:column;gap:7px;min-width:0}
.zoekbare-lijst .zoekbaar-veld{
width:100%;
padding:10px 13px;
border:1px solid var(--aoh-line);
border-radius:9px;
font:inherit;
font-size:14px;
min-height:42px;
flex:none;
min-width:0;
max-width:none;
}
.zoekbare-lijst > select{width:100%}
.zoekbaar-tel{font-size:12.5px;color:var(--aoh-muted);min-height:1em}
.zoekbaar-tel:empty{display:none}
/* Het zoekveld staat in een kolom-flexbox. De algemene regel voor zoekvelden
gebruikt flex:1 1 320px, en in een kolom slaat die 320px op de HOOGTE — het
veld werd daardoor een grote bak. Hier expliciet op regelhoogte zetten. */
.adash-sec .zoekbare-lijst > .zoekbaar-veld{
flex:0 0 auto;
height:42px;
min-height:42px;
max-height:42px;
min-width:0;
max-width:none;
}
/* De instellingenrij van de bronmotor is een losse reeks: een met de
uitleg, het getalveld en de knop. Met align-items:flex-end zakte de tekst
onder het veld weg; op midden uitgelijnd staan ze op één lijn. */
.bron-paneel form{
align-items:center;
row-gap:16px;
}
.bron-paneel form > span{
line-height:44px;
color:var(--aoh-ink);
font-size:14.5px;
font-weight:600;
}
.bron-paneel form > input[type=number]{flex:0 0 160px}
.bron-paneel form > button{flex:0 0 auto}
/* De aan/uit-keuze staat op een eigen regel boven de limiet. */
.bron-paneel form > label:has(> input[type=checkbox]){
flex:1 1 100%;
align-items:center;
min-height:0;
}
/* ============================================================================
BEHEER — laatste afwerking
========================================================================= */
/* Knoppen in het beheer krijgen dezelfde maat, zodat rijen niet schokken. */
.adash-sec .card .btn,
.adash-sec .card button:not(.adash-link):not(.bron-tab){
min-height:44px;
border-radius:9px;
font-weight:650;
}
/* Een rij knoppen onder elkaar hoort niet aan elkaar te plakken. */
.adash-sec .card .quick-actions + *{margin-top:4px}
/* Tabellen: kopregel blijft staan bij het scrollen van een lange lijst. */
.adash-sec .aoh-table-wrap{max-height:none}
.adash-sec table th{position:sticky;top:0;background:#fff;z-index:1}
.adash-sec .business-admin-table th{background:#fff}
/* Getallen in tabellen netjes onder elkaar. */
.adash-sec table td b,
.adash-sec .adash-kpi strong,
.adash-sec .admin-kpi strong{font-variant-numeric:tabular-nums}
/* Links in het beheer volgen de merkkleur en zijn herkenbaar als link. */
.adash-sec .card a:not(.btn){
color:var(--aoh-blue);
text-decoration:underline;
text-underline-offset:2px;
text-decoration-thickness:1px;
}
.adash-sec .card a:not(.btn):hover{color:var(--aoh-orange)}
/* Voorgeformatteerde blokken (ruwe controlegegevens) leesbaar houden. */
.adash-sec .card pre{
margin:12px 0 0;
padding:14px 16px;
background:var(--aoh-soft);
border:1px solid var(--aoh-line);
border-radius:9px;
font-size:12.5px;
line-height:1.55;
max-height:340px;
overflow:auto;
}
/* Meldingen in het beheer: duidelijk kader in plaats van losse tekst. */
.adash-sec .card .notice{
background:#fff8ed;
border:1px solid #f3d7b3;
color:#7a5417;
}
.adash-sec .card p[role=status]:not(:empty){
margin:12px 0 0;
padding:12px 15px;
background:#eef5ee;
border:1px solid #cfe3d2;
border-radius:9px;
color:#1d6b3d;
font-size:14px;
}
/* Lange bron-URL's en e-mailadressen mogen afbreken in plaats van uit te steken. */
.adash-sec .card code,
.adash-sec .card .meta{overflow-wrap:anywhere}
/* Alles in de instellingenrij op dezelfde hoogte. De algemene regel zet knoppen
op align-self:flex-end; hier moeten ze meedoen met het midden, en alle drie
de onderdelen krijgen dezelfde hoogte zodat de rij strak staat. */
.bron-paneel form > span,
.bron-paneel form > input[type=number],
.bron-paneel form > button{
align-self:center;
height:44px;
min-height:44px;
margin:0;
}
.bron-paneel form > span{display:inline-flex;align-items:center;line-height:1.35}
/* Even zwaar als .adash-sec .card form > button, en later in het bestand, zodat
de knop in de instellingenrij ook echt op het midden uitlijnt. */
.adash-sec .bron-paneel form > button{align-self:center}
/* Het e-mailadres in de kop mag de knoppen niet wegdrukken. Op een smal scherm
verdwijnt het; de knoppen zeggen dan nog steeds wie je bent. */
.head-actions .head-account{align-self:center;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.head-actions .head-account{display:none}}
/* Het logo in de voettekst was 245px breed in een kaart van 270px, tegenover 180px in
de navigatiebalk, en daarmee het grootste element op de pagina. Nu het voetlogo even
breed als bovenin, en de witte kaart krimpt mee. Deze regels staan als laatste en
winnen daarom van de eerdere !important-regels in index.html. */
.footer-logo-card{width:204px!important;padding:8px 12px!important}
.footer-logo-card img{width:180px!important;height:auto!important}
@media (max-width:640px){
.footer-logo-card{width:164px!important}
.footer-logo-card img{width:140px!important}
}
/* De makerslink in de auteursregel moet leesbaar blijven op de donkere voettekst. */
.footer .copyright a{display:inline;color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer .copyright a:hover{color:#fff}
/* Klantportaal. De tabbladen stonden op 11px, de activiteitenregels op 12px en de
kopjes op 18px, op een basis van 16px. De hele pagina oogde daardoor als een
verkleinde kopie. Alles hier gaat naar de maten van de rest van de site, met
dezelfde ruimte als het beheerdersdashboard. */
.portal-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.portal-tab{font-size:15px!important;font-weight:600;padding:12px 22px!important;line-height:1.2}
.portal-grid{gap:24px!important;grid-template-columns:1.5fr 1fr}
.portal-grid .card.box,#portalAccount.card.box{padding:28px!important}
.portal-grid .card h3,#portalAccount h3{font-size:22px;line-height:1.3;margin:0 0 16px}
.activity{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0!important;font-size:16px!important}
.activity span{font-size:16px!important}
.activity b{font-size:20px!important;font-weight:800}
.portal-grid p,.portal-grid .meta{font-size:15px;line-height:1.6}
.portal-grid .btn{padding:14px 18px;font-size:16px}
#portalAccount .quick-actions{align-items:center;gap:14px}
#portalAccount .meta{font-size:16px}
@media (max-width:820px){.portal-grid{grid-template-columns:1fr}}
/* De knop in de accountkaart bovenaan het portaal hoort even groot te zijn als de rest. */
#portalAccount .btn{padding:14px 18px;font-size:16px}
/* ============================================================
MOBIEL ronde 2 — de bedrijfskaart als compacte rij
Na de vorige ronde was een kaart nog steeds zo'n 640px hoog:
bijna een heel scherm per verhuurder, en bij twintig resultaten
13.000px scrollen. Nu een kleine foto links met naam, plaats en
product ernaast, en daaronder over de volle breedte het
vergelijkvinkje en de knoppen. .company-main doet met
display:contents mee in het raster van de kaart, zodat het
vinkje onder de foto door kan lopen.
============================================================ */
@media(max-width:760px){
.results .card.company{display:grid!important;grid-template-columns:88px minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:auto;column-gap:12px;row-gap:0;align-items:start;padding:14px!important;min-height:0!important}
.results .card.company>img,
.results .card.company>.company-image-fallback{grid-column:1!important;grid-row:1/span 4!important;width:88px!important;height:88px!important;min-height:0!important;max-height:none!important;aspect-ratio:1/1!important;border-radius:12px;object-fit:cover;align-self:start}
.results .card.company>.company-image-fallback{padding:6px;gap:2px}
.results .card.company>.company-image-fallback b,
.results .card.company>.company-image-fallback small{display:none}
/* Het bijschrift blijft eerlijk zeggen dat dit geen foto van de verhuurder
is, maar dan als kort label op de foto in plaats van een regel eronder. */
.results .card.company>.category-image-caption:empty{display:none}
.results .card.company>.category-image-caption{grid-area:auto!important;position:absolute;left:14px;top:84px;width:88px;margin:0!important;padding:3px 0!important;border-radius:0 0 12px 12px;background:rgba(8,38,77,.72);color:#fff;font-size:0!important;line-height:1;text-align:center;z-index:1}
.results .card.company>.category-image-caption::after{content:"Voorbeeldfoto";font-size:10px;font-weight:700;letter-spacing:.2px}
.results .card.company>.company-main{display:contents}
.results .card.company>.company-main>*{grid-column:2;min-width:0}
.results .card.company>.company-main>h3{margin:0 0 6px!important;padding-right:40px;font-size:17px!important;line-height:1.25!important}
.results .card.company>.company-main>.meta{margin:0 0 4px!important;font-size:14px;line-height:1.4!important}
.results .card.company .search-product-proof{display:block!important;background:none!important;border:0!important;padding:0!important;margin:0 0 4px!important;font-size:13px!important;line-height:1.4}
.results .card.company .search-product-proof strong{display:inline}
.results .card.company .ranking-proof{margin:0 0 6px!important;font-size:12px!important}
/* Vergelijkvinkje en knoppen over de volle breedte, onder de foto. */
.results .card.company>.company-main>.selectcompare{grid-column:1/-1!important;margin:12px 0 0!important;min-height:44px;padding:8px 12px!important}
.results .card.company>.company-actions{grid-column:1/-1!important;grid-row:auto!important;padding:0!important;margin-top:8px;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.results .card.company>.company-actions>.btn{min-height:44px;margin:0!important}
/* Hartje in de hoek van de kaart in plaats van op de (nu kleine) foto. */
.results .card.company>.favorite{top:8px!important;right:8px!important;left:auto!important;width:34px!important;height:34px!important}
}
/* ============================================================
MOBIEL ronde 2 — zoekvenster
============================================================ */
/* Zolang een venster of het menu openstaat, scrolt de pagina erachter niet mee.
Via :has, zodat er geen klasse op body achterblijft als render() het venster
weggooit. */
html:has(.mobile-modal.open),body:has(.mobile-modal.open){overflow:hidden}
.mobile-modal-card .field-icon{color:#6d798d;font-size:17px;line-height:1;flex:0 0 auto}
.mobile-modal-card .field input{font-size:16px}
/* De postcode wordt tijdens het typen al in hoofdletters gezet; de voorbeeldtekst
hoeft dat niet en las als geschreeuw ("POSTCODE, BV. 4811 AV"). */
.field.location-field input::placeholder{text-transform:none}
/* Suggesties schoven over het postcodeveld en de Zoeken-knop heen; je kon pas
verder na het aantikken van een suggestie. In het venster schuiven ze nu mee
in de flow, zodat de velden eronder zichtbaar en bereikbaar blijven. */
.mobile-modal-card .smart-wrap{flex-wrap:wrap}
.mobile-modal-card .smart-wrap input{flex:1 1 0}
.mobile-modal-card .smart-suggest{position:static;flex:0 0 100%;margin:8px 0 0;box-shadow:none;max-height:none}
.mobile-modal-card .smart-suggest .smart-option:nth-child(n+5){display:none}
/* "Plaats wordt automatisch bepaald" stond al in het groen voordat er iets was
ingevuld, alsof het al gelukt was. Groen is nu alleen voor een gevonden plaats. */
.location-resolved{color:#6d798d;font-weight:600}
.location-resolved.postcode-ok{color:#16834d;font-weight:800}
.location-resolved.postcode-bad{color:#a64b1c;font-weight:800}
/* Eén focusrand: het kader laat de focus zien, niet ook nog het veld erbinnen. */
.mobile-modal-card .field input:focus,.mobile-modal-card .field input:focus-visible,
.mobile-modal-card .field select:focus,.mobile-modal-card .field select:focus-visible{outline:none;box-shadow:none}
.mobile-modal-card .field:focus-within{border-color:#7da6d5;box-shadow:0 0 0 3px #e8f1ff}
/* ============================================================
MOBIEL ronde 2 — hero op de homepage
De hero-afbeelding is breed: links een graafmachine, rechts een feest,
in het midden effen navy. Op een telefoon zag je alleen dat lege midden.
Hier schuift het beeld naar rechts (kaart met pinnen en feest), met een
donkere laag erover zodat de witte tekst leesbaar blijft.
============================================================ */
@media(max-width:760px){
.da-hero.da-hero-background{background:linear-gradient(180deg,rgba(6,29,62,.55) 0%,rgba(6,29,62,.72) 60%,rgba(6,29,62,.9) 100%),#102f4b url('/assets/hero-allesoverhuren-navy.jpg') 100% center/cover no-repeat!important;padding-bottom:46px!important}
.da-hero-background .da-hero-centered{padding-bottom:8px!important}
/* De vier vinkjes liepen als één regel het scherm uit ("Betrouwbare verhuur…").
Nu netjes over twee regels. */
.da-hero-background .da-points{flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important;width:auto!important;gap:6px 14px!important}
.da-hero-background .da-points span{font-size:12px!important;white-space:nowrap}
/* De categorieknoppen blijven een veegbare rij, maar vervagen aan de rechterrand
zodat zichtbaar is dat er meer komt. */
.da-hero-shortcuts{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:28px!important}
}
@media(max-width:760px){
/* Zoekkaart half over de onderrand van de hero, en zonder gat van bijna 60px
naar het volgende blok. */
.da-search-zone{margin-top:-28px!important;padding:0 0 12px!important}
.aoh-vendor{padding-top:14px!important}
/* Het icoon in de zoekkaart was een speld (⚲) die op een pin leek; een
vergrootglas zegt "zoeken", net als het veld in het zoekvenster. */
.mobile-searchtrigger .mst-icon{font-size:0!important}
.mobile-searchtrigger .mst-icon::before{content:"⌕";font-size:24px;line-height:1}
}
/* ============================================================
MOBIEL ronde 2 — vergelijkbalk
Een uitgeschakelde oranje knop op 45% dekking werd op de donkere balk
vaalgrijs en leek kapot. Nu duidelijk een "nog niet"-knop, en de tekst
ernaast zegt hoeveel er nog nodig zijn.
============================================================ */
.compare-dock .btn:disabled{background:rgba(255,255,255,.1)!important;color:#bed0e7!important;opacity:1!important;box-shadow:none!important;cursor:default}
@media(max-width:760px){
.compare-dock{gap:10px!important;padding:10px 10px 10px 14px!important;align-items:center}
.compare-dock b{font-size:14px!important}
.compare-dock small{font-size:12px!important;line-height:1.35}
.compare-dock .btn{min-width:0!important;flex:0 0 auto;font-size:14px!important;padding:11px 14px!important;min-height:44px}
}
@media(max-width:760px){
.compare-dock b{display:block;line-height:1.3!important}
/* Een algemene knopregel gaf het hartje min-height:44px, waardoor het over de
regel onder de titel hing. */
.results .card.company>.favorite{min-height:0!important;min-width:0!important;padding:0!important}
.results .card.company>.company-main>h3{min-height:34px}
}
/* ============================================================
MOBIEL ronde 2 — kop
De oranje knop stond over twee regels (55px hoog) en maakte de kop 70px.
Nu één regel en een kop van 62px. Op de pagina's waar de knop niets
toevoegt (je bent er al, of je bent aan het inloggen of afrekenen)
verdwijnt hij; body[data-route] wordt in render() gezet.
============================================================ */
@media(max-width:760px){
.header{height:62px!important}
.header .brand img{height:44px!important;width:auto!important}
.head-actions .btn-orange{white-space:nowrap;font-size:13px!important;padding:9px 12px!important;min-height:40px!important;height:40px;line-height:1.1}
.mobile-menu-btn{width:42px!important;height:42px!important}
body[data-route=register] .head-actions .btn-orange,
body[data-route=login] .head-actions .btn-orange,
body[data-route=checkout] .head-actions .btn-orange,
body[data-route=portal] .head-actions .btn-orange,
body[data-route=dashboard] .head-actions .btn-orange,
body[data-route=admin] .head-actions .btn-orange{display:none!important}
}
/* Lege vergelijkpagina: korte uitleg in drie stappen in plaats van één losse knop. */
.compare-empty{max-width:640px;margin:28px auto;padding:26px!important}
.compare-empty h2{margin:0 0 14px;font-size:22px}
.compare-empty-steps{margin:0 0 22px;padding:0;list-style:none;counter-reset:stap;display:grid;gap:14px}
.compare-empty-steps li{counter-increment:stap;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;line-height:1.5;color:var(--ink)}
.compare-empty-steps li::before{content:counter(stap);width:32px;height:32px;border-radius:10px;background:#edf4ff;color:var(--blue);font-weight:800;display:grid;place-items:center}
.compare-empty-steps i{font-style:normal;font-weight:700}
@media(max-width:760px){.compare-empty{margin:18px 0;padding:20px!important}}
/* ============================================================
MOBIEL ronde 2 — pakkettenpagina
Drie abonnementen, drie reclamevormen en drie bundels stonden onder
elkaar: ruim 7300px scrollen. Op een telefoon wordt elke groep een
veegbare rij; de volgende kaart piekt aan de rand, zodat duidelijk is
dat er meer is. Kaarten in een rij worden even hoog, dan lopen de
knoppen gelijk.
============================================================ */
@media(max-width:760px){
.plan-grid,.ad-choice-grid,.bundle-grid{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin:0 -24px!important;padding:8px 24px 18px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.plan-grid::-webkit-scrollbar,.ad-choice-grid::-webkit-scrollbar,.bundle-grid::-webkit-scrollbar{display:none}
.plan-grid>*,.ad-choice-grid>*,.bundle-grid>*{flex:0 0 84%!important;max-width:84%!important;min-width:0;margin:0!important;scroll-snap-align:start}
.bundle-grid>*{flex-basis:72%!important;max-width:72%!important}
}
/* ============================================================
MOBIEL ronde 2 — feedback klant
============================================================ */
@media(max-width:760px){
/* Kop: op mobiel één compacte Inloggen-knop in plaats van "Bedrijf aanmelden".
Inloggen is voor huurders én verhuurders; aanmelden staat in het menu.
Knop en menuknop even hoog (42px) en op één lijn. Selectie op het doel van
de knop, omdat business-final.js de knoppen na het laden opnieuw schrijft. */
.head-actions{align-items:center!important;gap:8px!important}
.head-actions .btn-orange[onclick*="register"]{display:none!important}
.head-actions .btn-outline[onclick*="login"]{display:inline-flex!important;align-items:center;justify-content:center;height:42px!important;min-height:42px!important;padding:0 16px!important;font-size:14px!important;line-height:1;border-radius:12px;white-space:nowrap}
.head-actions .btn-orange{height:42px!important;min-height:42px!important;border-radius:12px}
body[data-route=login] .head-actions .btn-outline[onclick*="login"]{display:none!important}
/* Populaire categorieën: één veegbare rij met grotere kaarten en alleen de
vijf bekendste (de eerste vijf uit de lijst in home()). */
.da-catgrid{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:24px;margin:0 -24px!important;padding:6px 24px 16px!important;scrollbar-width:none}
.da-catgrid::-webkit-scrollbar{display:none}
.da-catgrid>.da-cat:nth-child(n+6){display:none!important}
.da-catgrid>.da-cat{flex:0 0 42%!important;min-height:150px!important;scroll-snap-align:start;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 10px!important}
.da-catgrid .da-cat-icon{transform:scale(1.3);transform-origin:center}
.da-catgrid .da-cat-label{font-size:16px!important;line-height:1.25}
/* Extra-tegoedkaarten waren smaller (72%) en hadden piepkleine tekst (10-12px)
naast de andere kaarten op de pakkettenpagina. Nu even breed en leesbaar. */
.bundle-grid>*{flex-basis:84%!important;max-width:84%!important}
.bundle-card{padding:22px!important}
.bundle-card .bundle-label{font-size:13px!important;padding:5px 11px!important}
.bundle-card .bundle-price{font-size:36px!important;margin:12px 0 8px!important}
.bundle-card .bundle-line{font-size:16px!important;padding:12px 0!important}
.bundle-card .bundle-line b{font-size:18px!important}
.bundle-card>p{font-size:14px!important;line-height:1.5;margin:12px 0 16px!important}
.bundle-card>.btn{font-size:16px!important;min-height:48px}
}
/* Dubbele focusrand bij zoekvelden. De algemene regel bovenin
(:is(...):focus-visible{outline:3px ...!important}) tekende een rand om het
veld bínnen het kader, terwijl het kader zelf al oplicht. Dat zag eruit als
een kapotte knop. Voor velden in een kader toont nu alleen het kader de focus;
dat blijft goed zichtbaar voor toetsenbordgebruikers. */
.field input:focus,.field input:focus-visible,
.field select:focus,.field select:focus-visible,
.cat-filter-field input:focus,.cat-filter-field input:focus-visible{outline:none!important;box-shadow:none!important}
.field:focus-within,.cat-filter-field:focus-within{border-color:#1263a0!important;box-shadow:0 0 0 3px rgba(18,99,160,.18)!important}
@media(max-width:760px){
/* Woorden als "Verhuiswagen" werden midden in het woord afgebroken. */
.da-catgrid>.da-cat{flex-basis:44%!important;padding:18px 6px!important}
.da-catgrid .da-cat-label{overflow-wrap:normal!important;word-break:normal!important;hyphens:none;font-size:15px!important}
}
/* ============================================================
MOBIEL ronde 2b — homepage en profielpagina
============================================================ */
@media(max-width:760px){
/* De USP-balk (gratis vergelijken, actueel aanbod, ...) is op mobiel weg op
verzoek van de klant; dezelfde beloftes staan al als vinkjes in de hero. */
.da-benefits{display:none!important}
/* Statistieken: labels stonden op 8px en de cijfers op 17px. */
.da-statbar>div{padding:20px 10px!important;gap:6px}
.da-statbar strong{font-size:30px!important;line-height:1.1}
.da-statbar span{font-size:13px!important;line-height:1.35}
.da-stats small{display:block;font-size:12px!important;line-height:1.5;margin-top:10px}
/* Populaire categorieën: hoger, niet breder. */
.da-catgrid>.da-cat{min-height:190px!important}
}
/* Profielpagina: de foto had een vaste 16:9-verhouding met maximaal 520px hoog,
waardoor hij op brede schermen niet breder werd dan 924px en er rechts een
witte strook overbleef (op mobiel hetzelfde met 4:3). Nu vult de foto altijd
het hele vak; object-fit:cover snijdt bij waar nodig. */
.gallery-main{width:100%!important;aspect-ratio:auto!important;height:440px!important;max-height:none!important}
.gallery-main img{width:100%!important;height:100%!important;object-fit:cover}
@media(max-width:760px){.gallery-main{height:240px!important}}
/* Desktop: de bedrijfsnaam was net zo groot als een paginatitel, en het vak
Contact & actie hield halverwege op. Nu loopt het vak door tot de onderkant
van de kaart "Over ..." ernaast. */
@media(min-width:761px){
.profilegrid{align-items:stretch}
.profilegrid>aside{display:flex;flex-direction:column}
.profilegrid>aside>.box{flex:1 1 auto;margin-bottom:0!important}
.profilegrid>div>.box:last-child{margin-bottom:0!important}
.profilehead h1{font-size:26px!important;line-height:1.25}
}
/* Accountdeel van het mobiele menu: de wrapper doet niet mee in de opmaak, zodat
de knoppen er precies zo uitzien als de andere menuregels. */
.mobile-menu-account{display:contents}
.mobile-menu-logout{color:#a64b1c!important}
.mobile-menu-logout small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:#6d798d}
/* ============================================================
DESKTOP ronde 3 — beheer
============================================================ */
/* Aanmeldingen & accounts: subtabbladen (admin-indeling.js) en compacte regels.
Een dichtgeklapt item was een kaart van 87px; nu één regel van ~46px. */
.aanmeld-tabs{margin:18px 0 6px}
.aanmeld-teller{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:var(--orange,#ff6800);color:#fff;font-size:11px;font-weight:800;line-height:1}
.aanmeld-paneel>h4{margin:22px 0 4px!important}
.aanmeld-paneel>h4:first-child{margin-top:8px!important}
.aanmeld-paneel>p{margin:0 0 10px!important;font-size:14px;line-height:1.5;max-width:760px}
#businessAdmin .business-review{padding:0!important;margin:0 0 6px!important;border:1px solid var(--line,#e1e7ef)!important;border-radius:10px;background:#fff}
#businessAdmin .business-review>summary{padding:12px 14px!important;min-height:0!important;list-style-position:inside}
#businessAdmin .business-review[open]{padding:0 14px 14px!important}
#businessAdmin .business-review[open]>summary{margin:0 -14px 8px;border-bottom:1px solid var(--line,#e1e7ef)}
#businessAdmin>.notice{padding:12px 16px!important}
#businessAdmin>.notice p{margin:4px 0!important}
/* Back-ups: de statusmelding plakte tegen de knoppen eronder. */
#backupAdminContent>p[role=status]{margin-bottom:14px!important}
/* Contactgegevens voor huuraanvragen: zoekveld en keuzelijst stonden samen in één
smalle kolom, waardoor de rij scheef liep. Nu: zoeken | kiezen, dan e-mail | link. */
#leadContactAdminPanel .formgrid{grid-template-columns:1fr 1fr!important;align-items:start}
#leadContactAdminPanel .formgrid>.zoekbare-lijst{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
#leadContactAdminPanel .formgrid>.zoekbare-lijst>*{margin:0!important;width:100%!important;min-width:0}
#leadContactAdminPanel .formgrid>.btn{justify-self:start}
#leadContactAdminPanel>.btn{margin:12px 10px 0 0}
/* Bronmotor > Instellingen > AI instellen. Het formulier erfde een flexrij: de kop
en "Model: ..." stonden scheef naast elkaar en de knop hing niet op de hoogte
van het invoerveld. Nu een raster: kop met model eronder, uitleg over de volle
breedte, en sleutelveld en knop naast elkaar met dezelfde hoogte en onderkant. */
.adash-sec form[aria-label="AI instellen"]{display:grid!important;grid-template-columns:minmax(0,420px) auto 1fr;column-gap:12px;row-gap:0;align-items:end;margin:16px 0 8px}
.adash-sec form[aria-label="AI instellen"]>*{grid-column:1/-1;margin:0;align-self:auto!important}
.adash-sec form[aria-label="AI instellen"]>h4{margin:0 0 2px!important}
.adash-sec form[aria-label="AI instellen"]>h4+p{margin:0 0 12px!important;color:var(--muted,#6d798d);font-size:14px}
.adash-sec form[aria-label="AI instellen"]>p.meta{margin:0 0 8px!important}
.adash-sec form[aria-label="AI instellen"]>label{grid-column:1;display:flex;flex-direction:column;gap:6px;margin-top:8px!important;font-weight:700}
.adash-sec form[aria-label="AI instellen"]>label>input{width:100%!important;height:46px!important;margin:0!important;box-sizing:border-box}
.adash-sec form[aria-label="AI instellen"]>button[type=submit]{grid-column:2;height:46px!important;min-height:46px!important;margin:0!important;align-self:end!important;white-space:nowrap}
.adash-sec form[aria-label="AI instellen"]>p[role=status]{margin-top:8px!important}
.adash-sec form[aria-label="AI instellen"]>p[role=status]:empty{display:none}
/* Zoekresultaten op desktop: de knoppenkolom stond verticaal gecentreerd. Nu
onderaan, met dezelfde marge als de tekstkolom (16px), zodat de onderkant van
Aanvraag gelijk ligt met de onderkant van "Vergelijk dit bedrijf". */
@media(min-width:761px){
.results .card.company>.company-actions{justify-content:flex-end!important;padding-bottom:16px!important}
}
@media(min-width:761px){
.results .card.company>.company-main{display:flex!important;flex-direction:column}
.results .card.company>.company-main>.selectcompare{margin-top:auto!important}
}
/* Discovery: het label boven de titel is weg en Start/Stop is één knop. De titel
krijgt de hoogte van de knop, zodat beide op één lijn staan. */
.national-head{align-items:flex-start!important}
.national-head h2{margin:0 0 8px!important;min-height:44px;display:flex;align-items:center}
.national-actions .btn{min-height:44px;min-width:120px}
.national-actions .national-stop{color:#a1321f!important;border-color:#e5b3a8!important;background:#fff6f4!important}
/* De verwijderknop in een postcodechip erfde min-height:42px en werd een witte
ovaal over de chip. Nu een klein rond kruisje. */
.postcode-chip button{min-height:0!important;min-width:0!important;width:18px!important;height:18px!important;padding:0!important;line-height:1!important;display:inline-grid;place-items:center;font-size:13px}
@media(max-width:760px){
/* "Bekijk alle 33 categorieën" (zonder pijltje) netjes rechts op de kop. */
.da-sectionhead{align-items:center!important}
.da-sectionhead>button{text-align:right}
}
@media(max-width:760px){
/* Kop op dezelfde lijnen als de inhoud: de container heeft 16px binnenmarge,
de kop had 24px. Logo en menuknop sprongen daardoor 8px in. */
.header .wide{padding-left:16px!important;padding-right:16px!important}
}
@media(max-width:760px){
/* Pakketten klikken in het midden vast, zodat Pro (waar de pagina op opent)
gecentreerd staat met Gratis en Premium half zichtbaar ernaast. */
.plan-grid>*{scroll-snap-align:center!important}
}
@media(max-width:760px){
/* Ruimte voor het label "Meer zichtbaarheid" dat boven de Pro-kaart uitsteekt;
een veegbare rij knipt alles af wat buiten de rij valt. */
.plan-grid{padding-top:20px!important}
}
@media(max-width:760px){
/* Homepage op mobiel: huurders eerst. De populaire categorieën komen direct na
de zoekkaart; het blok "Staat jouw verhuurbedrijf er nog niet op?" daarna. */
main.da-home{display:flex;flex-direction:column}
main.da-home>*{order:3}
main.da-home>.da-hero,main.da-home>.da-search-zone{order:0}
main.da-home>.da-categories{order:1}
main.da-home>.aoh-vendor{order:2;padding-top:6px!important;padding-bottom:22px!important}
}
/* Het zoekvenster opent nu ook op desktop (via de categorieknoppen). Daar een
gecentreerd venster in plaats van een kaart over de volle breedte. */
@media(min-width:761px){
.mobile-modal{padding-top:120px!important}
.mobile-modal-card{max-width:520px;margin:0 auto;padding:24px!important}
}
/* ============================================================
MOBIEL — hele hero-achtergrond in beeld (wens klant 2026-09-28)
Op een telefoon zag je alleen de kaart en een stukje feest; de graafmachine
links viel buiten beeld. De foto is breed met een leeg navy midden. Nu twee
lagen van dezelfde foto op schermhoogte: rechts kaart en ballonnen (de
achtergrond zelf), links de graafmachine (::before, zacht uitlopend). Zo zie
je de hele scène, zonder het lege midden. De donkere laag (::after) ligt
over beide heen, zodat de witte tekst leesbaar blijft.
============================================================ */
@media(max-width:760px){
.da-hero.da-hero-background{background:#102f4b url('/assets/hero-allesoverhuren-navy.jpg') right center/auto 100% no-repeat!important;position:relative}
.da-hero.da-hero-background::before{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;pointer-events:none;
background:url('/assets/hero-allesoverhuren-navy.jpg') left center/auto 100% no-repeat;
-webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.da-hero.da-hero-background::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(6,29,62,.42) 0%,rgba(6,29,62,.58) 60%,rgba(6,29,62,.85) 100%)}
.da-hero-background .da-hero-centered{z-index:1}
}