/* De Haan: aanpassingen op het ontwerp (op verzoek). Laadt na style.css. */ /* 1. Header blijft altijd in beeld tijdens scrollen (ontwerp verborg hem bij naar beneden scrollen). */ .nav.hide{transform:none} /* 2. Smalle schermen: grid-kolommen niet laten oprekken door hun inhoud. */ .cgrid>*,.quote .grid>*,.ppanel>*,.fase-stage>*,.st>*,.tp-stage>*{min-width:0} /* 3. Mobiele actiebalk past ook op de kleinste telefoons. */ @media (max-width:360px){.mbar>*{min-width:0}.mbar{gap:6px;padding:6px}.mbar a{font-size:15px;gap:6px}} @media (max-width:330px){.mbar a{font-size:14px}.mb-q svg{display:none}} /* 4. Beeldvlakken met vaste verhouding én minimale hoogte werden op telefoons breder dan het scherm. */ @media (max-width:480px){.pimg,.fase-viz,.tp-media{min-height:0}} /* 5. Contactregels in de Joost-sectie: lange e-mail mag afbreken i.p.v. buiten beeld te lopen. */ .qact>*{min-width:0} .qact div span{overflow-wrap:anywhere} /* 6. Houtbouw-hero: kolom niet breder dan het scherm op kleine telefoons. */ @media (max-width:480px){.ahero2>*{min-width:0}} /* 7. Houtbouw, houtsoortkeuze: vier tegels passen pas vanaf ~1360 px; daaronder twee per rij, op heel smalle telefoons één. */ @media (min-width:1201px) and (max-width:1359px){#pg .pg-pick{grid-template-columns:repeat(2,1fr)}} @media (max-width:350px){#pg .pg-pick{grid-template-columns:1fr}} /* 8. Contactkaart: lang e-mailadres mag afbreken op smalle telefoons. */ .ccard .big{overflow-wrap:anywhere} /* 9. Bloeikalender: laatste maandlabel binnen het kader op heel smalle telefoons. */ @media (max-width:350px){.bl-m:nth-child(5){left:auto;right:3%}}
 #cut .cut-nav{grid-template-columns:repeat(4,1fr)} /* 10. Tuinaanleg, doorsnede: vier lagen (drainagelaag vervallen). */
 .dm{margin-top:12px} .dm-k{display:block;font-size:16px;color:var(--sage-l);margin-bottom:14px} .dm-cut .cut-viz{min-height:420px} .dm-cut .cl{cursor:default} .dm-l1{flex:1.1} .dm-glue{flex:.5;min-height:34px} .dm-mortar{flex:1.7} .dm-l4{flex:1.5} .dm-mortar::before{background-image:radial-gradient(rgba(255,255,255,.22) 2.5px,transparent 3px),radial-gradient(rgba(0,0,0,.25) 2px,transparent 2.5px);background-size:14px 14px,11px 11px;background-position:0 0,6px 5px} .dm-glue .cl-n{color:var(--accent);text-shadow:none} .dm-glue .cl-cm{background:var(--accent)} .dm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px} .dm-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding-bottom:16px;border-bottom:1px solid rgba(234,234,234,.14)} .dm-list li:last-child{border-bottom:0;padding-bottom:0} .dm-list b{font-family:var(--title);font-style:italic;font-weight:400;font-size:24px;color:var(--sage-l)} .dm-list strong{display:block;font-family:var(--title);font-weight:400;font-size:clamp(20px,1.6vw,24px);color:var(--light);margin-bottom:4px} .dm-list span{display:block;font-size:17px;line-height:1.5;color:rgba(234,234,234,.85)} /* 11. Drainagemortel als alternatieve opbouw. */
 @media (min-width:901px){.vb-grid{grid-template-columns:repeat(3,1fr)}} /* 12. Bestrating: drie voorbeeldverbanden (elleboogverband vervallen). */
 #pg .pg-wood{display:block} .pg-wood input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:#fff;font:inherit;font-size:17px;color:var(--accent)} .pg-wood input:focus{outline:2px solid var(--sage-l);outline-offset:1px} #pgLife{display:none} /* 13. Houtbouw: houtsoort zelf invullen. */
 .bs-frame svg rect[fill="#D9D3C4"],.bs-frame svg circle[fill="#B9B3A4"],.bs-frame svg line[stroke-dasharray],.bs-frame svg circle[cx="320"][cy="312"],.bs-frame svg circle[cx="370"][cy="345"],.bs-frame svg text[x="370"],.bs-frame svg line[x1="356"]{display:none} /* 14. Beschoeiing: alleen hardhout, drainage uit de doorsnede. */
 .scatter .ph{z-index:1} @media (min-width:768px){.scatter .p1{width:clamp(110px,14vw,230px);left:2%;top:15%}.scatter .p2{width:clamp(120px,15vw,250px);right:2%;top:13%}.scatter .p3{width:clamp(100px,12vw,200px);left:4%;bottom:5%}.scatter .p4{width:clamp(130px,16vw,270px);right:3%;bottom:4%}} /* 15. Over ons: foto's naar de randen, zodat de tekst in de kop vrij blijft. */
 @media (max-width:767px){.strip,.cta2,.marquee,.statement,section:has(.gal3),section.zoom,#inbeeld,main>section.pad-s:has(a.tlink[href="/diensten/"]):not(:has(.hs)),.scue,.scatter .p1,.scatter .p2,.scatter .p3,.grid3>.img{display:none!important} .rv,.rvg>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .pad{padding:56px 0} .pad-s{padding:44px 0}} /* 16. Mobiel rustiger en eenvoudiger: minder herhaling, geen decoratieve bewegende blokken, kalmere animaties. */
/* Projecten: leesbare tags op salie-achtergrond (14-10-2026) */
.sagebg .tags span{border-color:rgba(234,234,234,.5);color:var(--light)}
.sagebg .tags span:hover{background:var(--bg2);color:var(--accent)}
@media(max-width:900px){.story-grid>.gal:first-child{order:2}} /* Projecten mobiel: eerst titel en tekst, dan de foto's */