:root{--petrol:#146682;--petrol-d:#002f3f;--azuur:#00a995;--goud:#a97e32;--geel:#f5c74e;--oranje:#e86010;--oranje-d:#c4510c;--grond:#f0ece7;--kaart:#ffffff;--lijn:#e3ddd3;--tekst:#1d2a2f;--zacht:#4a5a60}
*{box-sizing:border-box}
body{margin:0;font-family:"Open Sans",system-ui,sans-serif;color:var(--tekst);background:var(--grond);line-height:1.5}
a{color:var(--petrol)}a:hover{color:var(--petrol-d)}
img{max-width:100%;display:block}
h1,h2,h3.serif{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.2px}
.script{font-family:Cookie,cursive;color:var(--goud);font-size:34px;font-weight:400;line-height:1;display:block;margin-bottom:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.topbar{background:var(--petrol-d);color:#fff;font-size:14px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.topbar a{color:#fff;font-weight:600;text-decoration:none}
header.site{background:#fff;border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{font-family:Fraunces,serif;font-size:28px;color:var(--petrol);text-decoration:none;line-height:1}
.logo img{height:46px;width:auto}
nav.main{display:flex;flex-wrap:wrap;gap:2px 6px}
nav.main a{text-decoration:none;color:var(--tekst);font-weight:600;padding:10px 10px;border-radius:8px}
nav.main a[aria-current="page"],nav.main a:hover{background:#e4eff2;color:var(--petrol-d)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.btn-oranje{background:var(--oranje-d);color:#fff}.btn-oranje:hover{background:#a8440a;color:#fff}
.btn-petrol{background:var(--petrol);color:#fff}.btn-petrol:hover{background:var(--petrol-d);color:#fff}
.btn-geel{background:var(--geel);color:var(--tekst)}.btn-geel:hover{background:#e9b92f;color:var(--tekst)}
.btn-rand{background:#fff;color:var(--petrol);border:2px solid var(--petrol)}
.btn-wit{background:transparent;color:#fff;border:2px solid #fff}.btn-wit:hover{background:rgba(255,255,255,.12);color:#fff}
.hero{background:#2c5d6b url(img/hero.webp) center 35%/cover no-repeat;color:#fff}
.hero .scrim{background:rgba(0,30,40,.5)}
.hero .wrap{padding-top:80px;padding-bottom:64px}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.08;margin:0 0 14px;max-width:760px}
.hero p.lead{font-size:clamp(17px,2.2vw,20px);max-width:680px;margin:0 0 28px;color:#eef4f6}
.zoek{background:#fff;color:var(--tekst);border-radius:16px;padding:18px;box-shadow:0 12px 32px rgba(10,40,50,.2)}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tab{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #c9c1b3;background:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:15px;color:var(--tekst)}
.tab[aria-selected="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
label.veld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--zacht)}
select,input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],textarea{min-height:48px;border:1px solid #c9c1b3;border-radius:10px;padding:0 12px;font:500 16px "Open Sans",sans-serif;color:var(--tekst);background:#fff;width:100%}
textarea{padding:12px;min-height:120px;resize:vertical}
select:focus,input:focus,textarea:focus,.btn:focus-visible,.tab:focus-visible,a:focus-visible,.strook:focus-visible,.vraag summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--geel);outline-offset:2px}
.usps{background:#fff;border-bottom:1px solid var(--lijn)}
.usps .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding-top:18px;padding-bottom:18px;font-size:15px}
.usps span.sub{color:var(--zacht);display:block}
.score{display:inline-block;background:var(--petrol);color:#fff;font-weight:700;border-radius:8px;padding:4px 8px;font-size:15px}
.score.geel{background:var(--geel);color:var(--tekst)}
section.blok{padding:56px 0 8px}
section.blok h2{font-size:clamp(28px,4vw,40px);color:var(--petrol);margin:0 0 6px}
.kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:10px;margin-bottom:24px}
.kop p{margin:0;color:var(--zacht);font-size:17px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--tekst)}
a.kaart:hover{box-shadow:0 8px 24px rgba(10,40,50,.12);color:var(--tekst)}
.kaart .foto{height:200px;background:#cfdde1;position:relative;overflow:hidden}
.kaart .foto img{width:100%;height:100%;object-fit:cover}
.kaart .foto .leeg{height:100%;display:flex;align-items:center;justify-content:center;color:#3d5a62;font-size:14px;padding:12px;text-align:center}
.label{position:absolute;top:12px;left:12px;background:var(--geel);color:var(--tekst);font-weight:700;font-size:13px;border-radius:999px;padding:5px 11px}
.kaart .in{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.kaart h3{margin:0;font-size:19px;line-height:1.3}
.kaart h3.serif{font-size:25px;color:var(--petrol)}
.meta{color:var(--zacht);font-size:14px}
.kaart ul{margin:0;padding-left:18px;font-size:14px;color:var(--zacht)}
.prijsregel{margin-top:auto;padding-top:12px;border-top:1px solid #ece6dc;display:flex;justify-content:space-between;align-items:end;gap:10px}
.prijs{font-size:26px;font-weight:700}
.klein{font-size:14px;color:var(--zacht)}
.chip{display:inline-block;background:#dff4f1;color:#00594e;font-weight:700;font-size:13px;border-radius:999px;padding:5px 11px}
/* De oude .stappen-regels zijn vervangen door .reisstappen (startpagina) en
   .boekstappen (stappenbalk in de checkout). Twee verschillende dingen, twee namen. */
.band{background:var(--petrol);color:#fff;margin-top:56px}
.band .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-top:48px;padding-bottom:48px}
.band img{width:340px;height:210px;object-fit:cover;border-radius:16px}
.band h2{color:#fff !important}
footer{background:var(--petrol-d);color:#e4eff2;margin-top:0;font-size:15px}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;padding-top:44px;padding-bottom:44px}
footer a{color:#e4eff2}
footer strong{color:#fff;display:block;margin-bottom:6px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:16px;margin-bottom:22px}
.filters label.veld{min-width:160px;flex:1}
.leeg-melding{background:#fff;border:1px dashed #c9c1b3;border-radius:16px;padding:28px;text-align:center}
.detail-kop{padding:28px 0 18px}
.detail-kop h1{font-size:clamp(30px,5vw,46px);color:var(--petrol);margin:6px 0}
.kruimel{font-size:14px;color:var(--zacht)}
.twee{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-bottom:40px}
.twee .hoofd{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:28px}
.twee aside{flex:1 1 330px;background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;position:sticky;top:90px;box-shadow:0 8px 24px rgba(10,40,50,.08)}
.paneel{background:#fff;border:1px solid var(--lijn);border-radius:16px;padding:22px}
.paneel h2{font-size:28px;color:var(--petrol);margin:0 0 12px}
.dag{border-top:1px solid #ece6dc;padding:12px 0}
.dag:first-of-type{border-top:0}
.dag strong{display:block}
.som{background:#f7f4ef;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.som div{display:flex;justify-content:space-between;gap:10px}
.som .tot{border-top:1px solid var(--lijn);padding-top:8px;font-weight:700;font-size:18px}
.rij2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.niveaus{display:flex;flex-wrap:wrap;gap:8px}
.niveaus button{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid #c9c1b3;background:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:15px;color:var(--tekst)}
.niveaus button[aria-pressed="true"]{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.formulier{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.formulier .vol{grid-column:1/-1}
.melding{background:#e5f4e4;border:1px solid #b9dcb6;border-radius:12px;padding:16px}
.fout{color:#a3260a;font-size:14px;font-weight:600}
.verborgen{display:none !important}
.check{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--zacht);min-height:36px}
.check input{width:20px;height:20px;accent-color:var(--petrol)}
pre.samenvatting{white-space:pre-wrap;background:#fff;border:1px solid var(--lijn);border-radius:10px;padding:12px;font:14px/1.5 "Open Sans",sans-serif;margin:10px 0}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.2);border-radius:999px}
img[src*="familie-kasba"]{object-position:75% center}
@media (max-width:640px){header.site{position:static}nav.main{flex-wrap:nowrap;overflow-x:auto;width:100%}nav.main a{white-space:nowrap}.band img{width:100%}.twee aside{position:static}.hero .wrap{padding-top:48px}}
.taalkeuze{min-height:40px;border:1px solid #c9c1b3;border-radius:999px;padding:0 10px;font:600 14px 'Open Sans',sans-serif;background:#fff;color:var(--tekst);width:auto}

/* ---- Aanvulling 31-10-2026: vertrouwen, beeld, team ---- */
.vt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.vt{display:flex;flex-direction:column;gap:8px;background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 14px rgba(0,47,63,.08);color:var(--donker, #002f3f);text-decoration:none;transition:transform .15s}
.vt:hover{transform:translateY(-2px)}
.vt strong{font-size:19px;color:var(--petrol)}
.vt span{color:#4c5b61;line-height:1.55}
.vt .link{color:var(--oranje-d);font-weight:600;margin-top:auto}
.keurlogo{display:flex;align-items:center;height:56px}
.keurlogo img{max-height:56px;max-width:150px;width:auto}
.keurlogo b{display:inline-block;padding:10px 16px;border:2px solid var(--petrol);border-radius:10px;color:var(--petrol);font-size:18px}
.tpster{color:#00b67a;font-size:30px;letter-spacing:2px}
.mozaiek{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px;grid-auto-flow:dense}
.mozaiek a{position:relative;overflow:hidden;border-radius:14px;display:block}
.mozaiek a.m0{grid-column:span 2;grid-row:span 2}
.mozaiek a.m5{grid-column:span 2}
.mozaiek img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mozaiek a:hover img{transform:scale(1.05)}
.mozaiek span{position:absolute;left:12px;bottom:10px;color:#fff;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.strook{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 0 22px;padding-bottom:6px}
.strook img{flex:0 0 auto;width:min(78vw,380px);height:240px;object-fit:cover;border-radius:14px;scroll-snap-align:start}
.hero-klein{min-height:360px;background-size:cover;background-position:center}
.kruimel.licht,.kruimel.licht a{color:#e4eff2}
.cijfers .getal{display:block;font-family:Fraunces,serif;font-size:38px;color:var(--petrol);font-weight:700}
.twee-kol{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.twee-kol p{line-height:1.7;color:#3d4b51}
img.rond{width:100%;height:380px;object-fit:cover;border-radius:20px}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.lid{background:#fff;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 12px rgba(0,47,63,.07)}
.lid img,.lid .avatar{width:84px;height:84px;border-radius:50%;object-fit:cover}
.lid .avatar{display:flex;align-items:center;justify-content:center;background:var(--petrol);color:#fff;font:700 28px Fraunces,serif}
.lid .rol{color:var(--oranje-d);font-weight:600;font-size:14px}
.lid .fav{color:#55656b;font-size:14px;line-height:1.5}
.voet-logos{display:flex;gap:10px;margin-top:12px}
.voet-logos .keurlogo{background:#fff;border-radius:8px;padding:4px 8px;height:44px}
.voet-logos img{max-height:36px}
@media (max-width:760px){
 .mozaiek{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
 .mozaiek a.m0,.mozaiek a.m5{grid-column:span 2;grid-row:span 1}
 .twee-kol{grid-template-columns:1fr}
 img.rond{height:240px}
}
.vt .tpster{color:#00b67a}
.foto .sfeer{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px}

/* ---- Leeftijden, bezwaren en voorbeeldprijzen ---- */
.leeftijden{margin:-4px 0 4px}
.rij-leeftijd{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:6px}
.veld.sm{font-size:12px}
.veld.sm select{padding:8px 10px}
.bezwaar{display:flex;flex-direction:column;gap:6px;background:#fff6ec;border:1px solid #f0c9a0;border-left:4px solid var(--oranje);border-radius:10px;padding:14px;margin:6px 0;line-height:1.5}
.bezwaar strong{color:#8a4a10}
.bezwaar .klein{color:#6b5a4a}
.dossier{display:flex;align-items:center;gap:10px;background:var(--grond);border-radius:10px;padding:10px 14px;margin:0 0 12px;width:fit-content}
.dossier span{font-size:13px;color:var(--zacht)}
.dossier strong{font-family:Fraunces,serif;font-size:20px;letter-spacing:1px;color:var(--petrol)}

/* ---- Service- en juridische pagina's ---- */
.artikel .paneel{margin-bottom:18px}
.artikel h2{font-size:22px;color:var(--petrol);margin:0 0 10px}
.artikel .tekst p,.artikel .antwoord p{margin:0 0 12px;line-height:1.7;color:#3d4b51}
.artikel .tekst ul,.artikel .antwoord ul{margin:0 0 12px;padding-left:20px;line-height:1.7;color:#3d4b51}
.artikel .tekst li,.artikel .antwoord li{margin-bottom:4px}
.artikel a{color:var(--petrol);text-decoration:underline}
.vraag{border-bottom:1px solid var(--lijn);padding:10px 0}
.vraag:last-child{border-bottom:0}
.vraag summary{cursor:pointer;font-weight:600;color:var(--petrol-d);padding:6px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:'+';color:var(--oranje-d);font-size:20px;line-height:1}
.vraag[open] summary::after{content:'–'}
.vraag .antwoord{padding:4px 0 8px}
.lead-klein{margin:8px 0 0;color:var(--zacht);max-width:760px;line-height:1.6}
.zijlinks{display:flex;flex-direction:column;gap:6px}
.zijlinks a{color:var(--petrol);font-size:14px}

/* ---- Contactmenu ---- */
.zweef-doos{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.zweef-menu{background:#fff;border-radius:16px;box-shadow:0 10px 40px rgba(0,47,63,.22);padding:10px;width:min(300px,calc(100vw - 36px));display:flex;flex-direction:column;gap:2px}
.zweef-menu .kop{margin:4px 8px 8px;font-weight:700;color:var(--petrol);font-size:15px}
.zweef-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;color:var(--donker,#002f3f);text-decoration:none}
.zweef-menu a:hover,.zweef-menu a:focus{background:var(--grond)}
.zweef-menu a strong{font-size:15px;color:var(--petrol)}
.zweef-menu a span{font-size:12.5px;color:var(--zacht)}

/* ---- Leesbaarheid en bedienbaarheid op kleine schermen ---- */
/* Lange URLs in lopende tekst mogen de pagina niet breder maken dan het scherm. */
.artikel a,.artikel p,.artikel li{overflow-wrap:anywhere;word-break:break-word}
/* Losse links in lijsten en navigatie krijgen een ruimer klikgebied. WCAG 2.2 vraagt
   minimaal 24 bij 24 pixels; links midden in een zin zijn daarvan uitgezonderd. */
footer a,.zijlinks a,nav.main a{display:inline-block;padding:6px 0;min-height:24px}
@media (max-width:480px){
  footer a,.zijlinks a{padding:9px 0;min-height:30px}
  .artikel h2{font-size:20px}
  .vraag summary{padding:10px 0}
}

/* Klikdoelen op telefoons: losse links in de topbalk, kruimelpaden, sectiekoppen en de
   contactkolom staan op hun eigen regel. Ze krijgen daar 36px hoogte zodat ze met een duim
   te raken zijn. Links binnen een alinea blijven ongemoeid, die horen in de tekst mee te lopen. */
@media (max-width: 520px){
  .topbar a, .kruimel a, .blok .kop a, aside span > a{
    display: inline-block;
    min-height: 36px;
    line-height: 36px;
  }
  aside span > a{ line-height: 1.5; padding: 8px 0; }
}
/* Telefoon- en e-maillinks worden op een telefoon echt aangetikt. Ze krijgen daarom ook in
   lopende tekst een hoger klikvlak, zonder de regelafstand van de alinea te verstoren. */
@media (max-width: 520px){
  a[href^="tel:"], a[href^="mailto:"]{ display: inline-block; padding: 8px 0; }
}

/* Vertrouwensblok bij de prijs en bij het aanvraagformulier. */
.vertrouwblok{margin:18px 0 0;padding:16px;border:1px solid var(--rand);border-radius:10px;background:#f7fafa}
.vertrouwblok h3{font-size:15px;margin:0 0 8px}
.vertrouwblok h4{font-size:13px;margin:14px 0 6px;color:var(--zacht);text-transform:uppercase;letter-spacing:.04em}
.vertrouwblok p.nadruk{margin:0 0 10px;font-weight:600;font-size:14px}
.vertrouwblok ul,.vertrouwblok ol{margin:0;padding-left:18px;font-size:13px;line-height:1.7}
.vertrouwblok ol.stapjes li{margin:0 0 6px}
.vertrouwblok ol.stapjes strong{display:block;margin:0}
.vertrouwblok p.klein{margin:12px 0 0}
.vertrouwblok a{overflow-wrap:anywhere}
@media (max-width: 520px){
  /* De links in dit blok staan los op hun regel en worden met een duim aangetikt. */
  .vertrouwblok li a, .vertrouwblok p.klein a{display:inline-block;padding:8px 0;min-height:36px}
}

/* Reviewpagina: score en verdeling. */
.scorepaneel .score.groot{font-size:34px;display:inline-block;margin:0 0 6px}
.scorepaneel strong{display:block;font-size:17px}
.balken{display:flex;flex-direction:column;gap:6px}
.balkrij{display:grid;grid-template-columns:72px 1fr 44px;align-items:center;gap:10px;font-size:13px}
.balkrij .balk{background:var(--rand);border-radius:99px;height:10px;overflow:hidden}
.balkrij .balk > span{display:block;height:100%;background:var(--goud,#b98a2e);border-radius:99px}
.balkrij .pct{text-align:right;color:var(--zacht)}
/* Een picture-element mag de plaatsing van de afbeelding niet veranderen. */
.foto picture{display:contents}

/* Kleine tekst op donkere vlakken moet licht zijn om leesbaar te blijven (WCAG AA). */
footer .klein,.band .klein{color:#b4c4c9}

/* Prijsraster met vertrekdata: de gast ziet meteen welke datums er zijn en wat ze kosten,
   in plaats van een leeg datumveld waar bijna elke gok op "op aanvraag" uitkomt. */
.raster-kop{display:block;font-size:13px;font-weight:600;color:var(--zacht);margin:0 0 8px}
.datumraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.dknop{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
 background:#fff;border:1.5px solid var(--lijn);border-radius:12px;padding:10px 11px;cursor:pointer;
 font:inherit;text-align:left;transition:border-color .12s,background .12s}
.dknop:hover{border-color:var(--petrol)}
.dknop:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.dknop.aan{border-color:var(--petrol-d);background:#eefaf8;box-shadow:inset 0 0 0 1px var(--petrol-d)}
.dknop .dd{font-size:12px;font-weight:600;color:var(--zacht)}
.dknop .dp{font-size:17px;font-weight:700;color:var(--petrol-d);line-height:1.15}
.dknop .dl{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
 color:#7a5300;background:#fdf0d2;border-radius:999px;padding:2px 6px;margin-top:2px}
.dander{background:none;border:0;padding:6px 0 0;font:inherit;font-size:13px;font-weight:600;
 color:var(--petrol-d);text-decoration:underline;cursor:pointer}
.dander:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
@media (max-width:420px){.datumraster{grid-template-columns:repeat(2,1fr)}}

/* Boekingsflow: stappen en reizigersblokken. De gast ziet waar hij is en wat er nog komt. */
.boekstappen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0;counter-reset:st}
.boekstappen li{counter-increment:st;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
 color:var(--zacht);background:#f7f4ef;border-radius:999px;padding:6px 13px 6px 9px}
.boekstappen li::before{content:counter(st);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
 background:#e3ddd2;color:#6b6257;font-size:12px;font-weight:700}
.boekstappen li.klaar{color:#00594e;background:#dff4f1}
.boekstappen li.klaar::before{content:"\2713";background:#00594e;color:#fff}
.boekstappen li.nu{color:#fff;background:var(--petrol-d)}
.boekstappen li.nu::before{background:#fff;color:var(--petrol-d)}
fieldset.reiziger{border:1px solid var(--lijn);border-radius:12px;padding:12px 14px 14px;margin:0 0 12px}
fieldset.reiziger legend{font-size:13px;font-weight:700;color:var(--petrol-d);padding:0 6px}

/* Hoofdmenu op een smal scherm. Het schoof eerder horizontaal weg, waardoor items buiten
   beeld vielen; dat is precies het punt waar een bezoeker de weg kwijtraakt. Nu klapt het
   open als paneel en blijft de bovenkant rustig. */
.menuknop{display:none;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--lijn);
 border-radius:10px;padding:9px 13px;font:inherit;font-weight:700;font-size:14px;color:var(--petrol-d);cursor:pointer}
.menuknop:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.menuknop .streep{display:block;width:18px;height:2px;background:currentColor;position:relative}
.menuknop .streep::before,.menuknop .streep::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menuknop .streep::before{top:-6px}.menuknop .streep::after{top:6px}
@media (max-width:1100px){
  .menuknop{display:inline-flex}
  nav.main{display:none;flex-wrap:wrap;overflow:visible;width:100%;order:9;
   border-top:1px solid var(--lijn);margin-top:10px;padding-top:10px}
  nav.main.open{display:flex;flex-direction:column;gap:2px}
  nav.main a{white-space:normal;padding:12px 10px;border-radius:8px;font-size:16px}
  body.menu-open{overflow:hidden}
}


/* Zo boek je bij Sultan Travel: drie stappen als kaarten in plaats van een rij pillen
   waar de tekst uit liep. Het nummer is een badge, de titel staat erboven en de uitleg
   eronder, zodat je in een oogopslag ziet hoeveel stappen er zijn en wat ze inhouden. */
.blok-lead{margin:6px 0 0;color:var(--zacht);max-width:62ch;font-size:17px}
ol.reisstappen{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:none}
ol.reisstappen li{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:16px;
 padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px}
ol.reisstappen li::before{content:none}
ol.reisstappen .nr{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
 background:var(--petrol);color:#fff;font-weight:700;font-size:18px;line-height:1;font-family:inherit}
ol.reisstappen strong{font-size:18px;color:var(--petrol-d);line-height:1.25}
ol.reisstappen li>span:last-child{color:var(--zacht);font-size:15px;line-height:1.55}
/* Een dunne lijn tussen de kaarten, zodat het als een volgorde leest en niet als drie losse blokken. */
@media (min-width:760px){
 ol.reisstappen li:not(:last-child)::after{content:"";position:absolute;top:40px;right:-9px;width:18px;height:1px;background:var(--lijn)}
}

/* USP-rij onder de hero. Was vijf tekstblokjes naast elkaar; nu kaarten met een icoon,
   zodat je in een oogopslag ziet dat het om zekerheden gaat. Op mobiel twee kolommen. */
.usps .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
 padding-top:20px;padding-bottom:20px;font-size:15px}
.usp{display:flex;align-items:flex-start;gap:11px;background:var(--grond,#f7f4ef);
 border-radius:14px;padding:14px 15px;text-decoration:none;color:inherit;min-height:100%}
a.usp:hover,a.usp:focus-visible{background:#eef6f7}
.usp-icoon{flex:0 0 22px;width:22px;height:22px;color:var(--petrol);margin-top:1px}
.usp-tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.usp-tekst strong{color:var(--petrol-d);font-size:15px;line-height:1.3}
.usps span.sub{color:var(--zacht);display:block;font-size:13.5px;line-height:1.45}
.usp-cijfer{flex:0 0 auto;display:grid;place-items:center;min-width:38px;height:26px;padding:0 7px;
 border-radius:7px;background:#f6c344;color:#4a3700;font-weight:800;font-size:15px;margin-top:1px}
/* Zes kaarten: 6 naast elkaar op breed scherm, 3×2 daartussen, 2×3 op mobiel. Nooit een gat. */
@media (min-width:1100px){ .usps .wrap{grid-template-columns:repeat(6,minmax(0,1fr))} .usp{flex-direction:column;gap:8px} }
@media (max-width:620px){
 .usps .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .usp{flex-direction:column;gap:7px;padding:13px 12px}
 .usp-tekst strong{font-size:14px}
 .usps span.sub{font-size:12.5px}
}

/* Het contactvenster had wel het hidden-attribuut maar display:flex overschreef dat, dus
   het stond op elke pagina open en bedekte de inhoud. */
.zweef-menu[hidden]{display:none}

/* Bovenste balk. De zekerheden stonden als één lange zin die op mobiel over drie regels
   viel en 160 pixels van het eerste scherm opat voordat het logo in beeld kwam. Nu losse
   punten met een vinkje, en op smal scherm alleen het telefoonnummer. */
.tb-punten{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;margin:0;padding:0}
.tb-punten li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tb-punten li::before{content:"";flex:0 0 13px;width:13px;height:13px;
 background:currentColor;opacity:.75;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E") center/contain no-repeat}
.tb-contact{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tb-contact a{font-weight:700}
.tb-uren{opacity:.8}
@media (max-width:900px){
 .tb-punten{display:none}
 #topbar .wrap{justify-content:center;padding-top:2px;padding-bottom:2px}
 .tb-contact{gap:6px;font-size:14px}
 /* Het aanraakvlak van 44 pixels blijft, maar zonder de extra regelhoogte eromheen:
    zo is de balk nog maar een regel hoog in plaats van drie. */
 .tb-contact a{display:inline-flex;align-items:center;min-height:44px;line-height:1.2;padding:0}
}
@media (max-width:420px){ .tb-uren{display:none} }

/* Taalkeuze: op mobiel nam de hele keuzelijst een eigen rij onder het logo. Nu compact
   naast de menuknop, met alleen de landcode. */
@media (max-width:1100px){
 /* Logo links, dan taalkeuze en menuknop samen rechts op dezelfde regel. De keuzelijst
    nam eerder een eigen rij onder het logo; dat is ruimte weggeven op het scherm waar je
    er het minst van hebt. Alleen de landcode past, dus die tonen we. */
 header.site .wrap{flex-wrap:nowrap;gap:10px}
 .logo{margin-right:auto;flex:0 1 auto;min-width:0}
 .taalkeuze{width:auto;max-width:74px;min-width:0;padding:0 22px 0 9px;font-size:13px;
  flex:0 0 auto;order:2}
 .menuknop{order:3;flex:0 0 auto}
 nav.main{order:9}
}

/* Hero op mobiel: de zoekbalk is de knop waar we geld aan verdienen, dus die
   hoort zonder scrollen in beeld te staan. Op 390px duwden de kop (4 regels)
   en de losse ruimte het zoekveld naar 611px; de verzendknop stond op 868px,
   dus buiten het scherm. Kleinere kop, krappere ruimte, kortere tussenregel.
   De beloftes die uit de tussenregel zijn gehaald (geen boekingskosten,
   eigen partners) staan al in de USP-kaarten direct onder de hero. */
@media (max-width:640px){
 .hero .wrap{padding-top:26px;padding-bottom:26px}
 .hero h1{font-size:29px;line-height:1.12;margin:0 0 9px}
 .hero p.lead{font-size:16px;line-height:1.35;margin:0 0 16px}
}
@media (max-width:380px){
 .hero h1{font-size:26px}
}

/* Twee beoordelingskaarten naast elkaar op de reviewspagina: Trustpilot en Google.
   Een cijfer zonder het aantal beoordelingen zegt niets, dus staat dat er altijd bij. */
.cijferkaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 16px}
.cijferkaarten .paneel{margin:0}
.cijferkaarten h3{margin:0 0 6px;font-size:24px}

/* Regel onder het datumraster: tot waar de dienstregeling gepubliceerd is. Dit is geen
   "uitverkocht" maar een "nog niet bekend", en dat verschil hoort de gast te zien. */
.raster-tot{margin:10px 0 0;max-width:46em}

/* Leestekst van een reisgids: smaller dan de volle kolom, want een regel van honderd
   tekens leest niemand prettig. Koppen krijgen lucht erboven. */
.gidstekst{max-width:38em}
.gidstekst h2{margin:26px 0 8px;font-size:22px}
.gidstekst h2:first-child{margin-top:0}
.gidstekst p{line-height:1.75}
.gidstekst ul{line-height:1.8;padding-left:20px}

/* Faciliteitenrooster op de hotelpagina. Twee kolommen op mobiel, meer op een breed scherm,
   met een vinkje per regel. Komt van de eigen hotelpagina's op www.sultantravel.nl. */
.faclijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px 14px}
.faclijst li{position:relative;padding-left:20px;font-size:15px;line-height:1.5}
.faclijst li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--azuur);font-weight:700}

/* Kamerkeuze in het prijsblok. Zelfde patroon als het datumraster: hele rij is de knop, het
   prijsverschil staat rechts op de hoogte van de naam, zodat je de kolom kunt scannen. */
.kamerkeuze{display:flex;flex-direction:column;gap:8px}
.kknop{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font:inherit;color:var(--tekst);
 background:#fff;border:1.5px solid var(--lijn);border-radius:12px;padding:11px;cursor:pointer;transition:border-color .12s,background .12s}
.kknop:hover{border-color:var(--petrol)}
.kknop[aria-pressed="true"]{border-color:var(--petrol-d);background:#eefaf8;box-shadow:inset 0 0 0 1px var(--petrol-d)}
.kknop:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.kknop .kb{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid #b9b2a6;margin-top:2px;display:grid;place-items:center}
.kknop[aria-pressed="true"] .kb{border-color:var(--petrol-d)}
.kknop[aria-pressed="true"] .kb::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--petrol-d)}
.kknop .kt{flex:1 1 auto;min-width:0}
.kknop .kn{display:block;font-weight:700;font-size:14.5px;line-height:1.25}
.kknop .kz{display:block;font-size:12px;color:var(--zacht);margin-top:2px}
.kknop .kp{flex:0 0 auto;font-weight:700;font-size:14.5px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--petrol-d)}
.kknop .kp.in{color:#0b6b5f;font-size:12px}

/* Prijsbalk op de telefoon. Onder 920px staat het prijsblok onder de hele pagina; deze balk
   houdt het totaal en de knop in beeld en schuift weg zodra het prijsblok zelf in beeld is. */
.prijsbalk,.balkruimte{display:none}
@media (max-width:919px){
 .prijsbalk{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;
  border-top:1px solid var(--lijn);box-shadow:0 -6px 20px rgba(10,40,50,.12);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));transition:transform .18s ease}
 .prijsbalk.weg{transform:translateY(115%)}
 .prijsbalk .pb-som{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
 .prijsbalk strong{font-size:20px;line-height:1.15;color:var(--petrol-d);font-variant-numeric:tabular-nums}
 .prijsbalk span{font-size:12.5px;color:var(--zacht)}
 .prijsbalk .btn{flex:0 0 auto}
 .balkruimte{display:block;height:84px}
}
@media (prefers-reduced-motion:reduce){.prijsbalk,.kknop{transition:none}}
/* De zwevende knop "Vraag het ons" mag niet over de boekknop in de prijsbalk liggen. :has()
   volgt de pagina vanzelf: weg van de hotelpagina is er geen balk en zakt de knop terug. */
@media (max-width:919px){
 body:has(.prijsbalk:not(.weg)) .zweef-doos,
 body:has(.prijsbalk:not(.weg)) .wa-float{bottom:calc(92px + env(safe-area-inset-bottom));transition:bottom .18s ease}
}
/* Een verborgen datumveld laat geen los label achter boven de kamerkeuze. */
label.veld:has(> input.verborgen){display:none}

/* Zoekvak: de drie soorten reis als één gesegmenteerde knop, gelijke breedte, nooit een
   losse knop op een tweede regel. Daaronder in vinkjes wat erin zit. */
.zoek .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:600px;gap:4px;padding:4px;margin-bottom:10px;
 background:#f1ede6;border-radius:14px;flex-wrap:nowrap}
.zoek .tab{min-height:46px;padding:6px 8px;border:0;border-radius:11px;background:transparent;line-height:1.2;
 font-size:15px;color:var(--petrol-d);overflow-wrap:anywhere;hyphens:auto}
.zoek .tab[aria-selected="true"]{background:var(--petrol);color:#fff;box-shadow:0 2px 6px rgba(10,40,50,.18)}
.zoek-inc{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 14px;padding:0 2px;
 font-size:14px;font-weight:600;color:var(--petrol-d)}
.zoek-inc li{display:flex;align-items:center;gap:5px}
.zoek-inc svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:#2f8a5b;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:620px){
 .zoek .tab{font-size:14px;padding:6px 4px}
 .zoek-inc{font-size:13px;gap:6px 12px}
}

/* Zwevende contactknop: op mobiel weg zolang het zoekvak in beeld is (zie zweefBijZoekvak). */
.zweef-doos{transition:transform .22s ease,opacity .22s ease}
@media (max-width:919px){
 body.zoek-in-beeld .zweef-doos{transform:translateY(140%);opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.zweef-doos{transition:none}}
/* Bij te boeken extra's. Hele rij aantikbaar, prijs rechts op de hoogte van de naam, net als
   bij de kamerkeuze. Een extra zonder prijs krijgt geen bedrag maar een toelichting. */
.extras{display:flex;flex-direction:column;gap:8px}
.xknop{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1.5px solid var(--lijn);
 border-radius:12px;padding:11px;cursor:pointer;transition:border-color .12s,background .12s}
.xknop:hover{border-color:var(--petrol)}
.xknop.aan{border-color:var(--petrol-d);background:#eefaf8;box-shadow:inset 0 0 0 1px var(--petrol-d)}
.xknop:focus-within{outline:3px solid var(--petrol);outline-offset:2px}
.xknop input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--petrol-d);cursor:pointer}
.xknop .xt{flex:1 1 auto;min-width:0}
.xknop .xn{display:block;font-weight:700;font-size:14.5px;line-height:1.25}
.xknop .xz{display:block;font-size:12px;color:var(--zacht);margin-top:2px}
.xknop .xp{flex:0 0 auto;font-weight:700;font-size:14.5px;white-space:nowrap;color:var(--petrol-d);
 font-variant-numeric:tabular-nums}
.xknop .xp.op{font-weight:600;font-size:11.5px;color:var(--zacht);white-space:normal;max-width:84px;text-align:right}

/* Indicatieve vluchtprijzen: duidelijk apart van onze eigen prijzen. */
.indicatie{margin:14px 0 0;padding:12px 14px;border:1px dashed #cfc7b9;border-radius:12px;background:#faf8f5}
.indicatie strong{font-size:15px;color:var(--petrol-d)}