/* ===== Mobiele weergave (tablet en telefoon) =====
   De pagina's zijn met inline stijlen gebouwd; deze regels passen ze aan
   voor kleinere schermen. */

/* mobiel menu: standaard verborgen */
.mdb-burger,.mdb-menu{display:none}

@media (max-width: 1000px){
  body{min-width:0 !important}
  #app [style*="min-width: 1280px"]{min-width:0 !important;--gx:24px !important}
  #app [style*="max-width: 1000px"]{max-width:none !important}

  /* menu */
  #app header nav{display:none !important}
  #app header{height:72px !important}
  .mdb-burger{display:flex;position:fixed;top:14px;right:16px;z-index:80;width:46px;height:46px;border-radius:999px;border:0;background:#18201D;color:#fff;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .mdb-menu{position:fixed;inset:0;z-index:79;background:#F6F0E5;padding:90px 28px 40px;box-sizing:border-box;flex-direction:column;gap:4px;overflow:auto}
  .mdb-menu.open{display:flex}
  .mdb-menu a{display:block;padding:14px 4px;font:600 22px/1.2 'Poppins',sans-serif;color:#18201D;border-bottom:1px solid #E2DCCF;text-decoration:none}
  .mdb-menu a[aria-current]{color:#173F36}
  .mdb-menu .mdb-menu-cta{margin-top:24px;border:0;border-radius:999px;background:#1F8A4C;color:#fff;text-align:center;font-size:17px;padding:16px}

  /* koppen */
  #app h1{font-size:44px !important;line-height:1.08 !important}
  #app h2{font-size:34px !important;line-height:1.12 !important}
  #app [style*="font-size: 84px"],#app [style*="font-size: 72px"],#app [style*="font-size: 68px"],#app [style*="font-size: 64px"],#app [style*="font-size: 60px"],#app [style*="font-size: 56px"],#app [style*="font-size: 54px"],#app [style*="font-size: 52px"]{font-size:36px !important;line-height:1.12 !important}
  #app [style*="font-size: 46px"],#app [style*="font-size: 44px"],#app [style*="font-size: 38px"],#app [style*="font-size: 36px"],#app [style*="font-size: 34px"]{font-size:28px !important}

  /* ruimtes */
  #app section{padding-top:64px !important;padding-bottom:64px !important}
  #app section#top{padding-top:40px !important}
  #app section#top[style*="padding: 128px"]{padding-top:100px !important}
  #app [style*="gap: 96px"],#app [style*="gap: 88px"],#app [style*="gap: 80px"],#app [style*="gap: 72px"],#app [style*="gap: 64px"],#app [style*="gap: 60px"],#app [style*="gap: 56px"],#app [style*="gap: 52px"]{gap:32px !important}
  #app [style*="gap: 48px"],#app [style*="gap: 44px"],#app [style*="gap: 40px"]{gap:24px !important}
  #app [style*="padding: 90px 80px"],#app [style*="padding: 80px 60px"],#app [style*="padding: 70px;"],#app [style*="padding: 64px"],#app [style*="padding: 56px"],#app [style*="padding: 48px 56px"],#app [style*="padding: 44px 40px"],#app [style*="padding: 44px 36px"],#app [style*="padding: 40px 48px"],#app [style*="padding: 40px;"]{padding:28px 22px !important}

  /* vaste breedtes */
  #app [style*="width: 1000px"],#app [style*="width: 640px"],#app [style*="width: 620px"],#app [style*="width: 600px"],#app [style*="width: 560px"],#app [style*="width: 470px"],#app [style*="width: 460px"],#app [style*="width: 440px"],#app [style*="width: 420px"],#app [style*="width: 400px"],#app [style*="width: 360px"],#app [style*="width: 340px"],#app [style*="width: 330px"],#app [style*="width: 320px"],#app [style*="width: 300px"]{width:auto !important;max-width:100% !important;flex-shrink:1 !important}

  /* rijen onder elkaar */
  #app section > div[style*="display: flex"]:not([style*="flex-direction: column"]),#app section > a[style*="display: flex"]:not([style*="flex-direction: column"]),#app footer [style*="justify-content: space-between"]:not([style*="flex-direction: column"]),#app [style*="justify-content: space-between; align-items: flex-end"]{flex-wrap:wrap !important}
  #app section[style*="display: flex"]:not([style*="flex-direction: column"]){flex-direction:column !important;align-items:stretch !important}
  #app [style*="display: flex"][style*="gap: 64px"]:not([style*="flex-direction: column"]),#app [style*="display: flex"][style*="gap: 56px"]:not([style*="flex-direction: column"]),#app [style*="display: flex"][style*="gap: 48px"]:not([style*="flex-direction: column"]){flex-wrap:wrap !important}
  #app [style*="display: flex"]:not([style*="flex-direction: column"]) > [style*="display: flex"][style*="flex-direction: column"]{min-width:0}
  #app input,#app textarea,#app select{box-sizing:border-box !important;max-width:100%;min-width:0}
  #app a[style*="border-radius: 999px"][style*="height: 5"],#app button[style*="border-radius: 999px"][style*="height: 5"]{white-space:nowrap;max-width:100%}
  #app [style*="display: flex"]:not([style*="flex-direction: column"]):has(> a[style*="border-radius: 999px"][style*="height: 5"]),#app [style*="display: flex"]:not([style*="flex-direction: column"]):has(> button[style*="border-radius: 999px"][style*="height: 5"]){flex-wrap:wrap !important}
  #app [style*="grid-template-columns"] > *{min-width:0}
  #app [style*="gap: 6px; padding: 6px; border-radius: 999px"]{overflow-x:auto;max-width:100%;flex-shrink:1 !important;scrollbar-width:none}
  #app [style*="gap: 6px; padding: 6px; border-radius: 999px"] > *{flex-shrink:0}
  /* kruimelpad: rechter links weg */
  #app [style*="height: 52px"][style*="border-top: 1px solid #E2DCCF"] > span:last-child{display:none !important}
  #app [style*="height: 52px"][style*="border-top: 1px solid #E2DCCF"]{height:auto !important;padding-top:12px !important;padding-bottom:12px !important}
  /* werkwijze-lijn weg */
  #app [style*="left: 22px; right: 22px; top: 22px; height: 2px"]{display:none !important}
  /* hero-intro: foto boven tekst */
  #app [style*="gap: 18px; max-width: 660px"]{flex-direction:column !important;align-items:flex-start !important}
  /* fotoblok + lijst */
  #app [style*="grid-template-columns: 1.25fr 1fr"]{height:auto !important}
  #app [style*="grid-template-columns: 1.25fr 1fr"] img{height:220px !important}
  /* donkere band: onder elkaar */
  #app a.lift[style*="padding: 40px 48px"]{flex-direction:column !important;align-items:flex-start !important}
  #app a.lift[style*="padding: 40px 48px"] > span{flex-wrap:wrap}
  /* cookiemelding over de volle breedte */
  #app [style*="position: fixed; left: 28px; bottom: 28px; width: 440px"]{left:12px !important;right:12px !important;width:auto !important;bottom:12px !important}

  /* rasters */
  #app [style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #app section[style*="grid-template-columns"],#app [style*="grid-template-columns: 1.25fr"]{grid-template-columns:1fr !important}

  /* hoogtes */
  #app [style*="height: 560px"],#app [style*="height: 540px"],#app [style*="height: 420px"],#app [style*="height: 400px"],#app [style*="height: 360px"],#app [style*="height: 340px"]{height:300px !important}
  #app [style*="min-height: 780px"],#app [style*="min-height: 760px"],#app [style*="min-height: 740px"],#app [style*="min-height: 720px"]{min-height:0 !important}

  /* configurator: regels met tekstkolom + prijs laten doorlopen */
  #app [style*="display: flex"]:has(> span[style*="flex-direction: column"][style*="flex-grow: 1"]){flex-wrap:wrap !important;row-gap:12px !important}
  #app span[style*="flex-direction: column"][style*="flex-grow: 1"]{flex:1 1 200px !important;min-width:0}
  #app span[style*="display: flex; align-items: center; gap: 10px;"]:has(> span[style*="padding: 3px 9px"]){flex-wrap:wrap}
  #app [style*="white-space: nowrap; width: 110px"]{width:auto !important;margin-left:auto}
  #app [style*="padding: 32px; border-radius: 24px"]{padding:22px 18px !important}
  #app [style*="padding: 32px; border-radius: 24px"] > div[style*="justify-content: space-between"]{flex-wrap:wrap !important;gap:8px}
  #app .hero-video__veil{background:linear-gradient(180deg,rgba(246,240,229,.84),rgba(246,240,229,.62) 55%,rgba(246,240,229,.78)) !important}
  #app .route .rt{font-size:23px}
  #app .route{gap:16px}
  #app footer{padding-bottom:96px !important}
  #app footer [style*="white-space: nowrap"]{white-space:normal !important}
}

@media (max-width: 640px){
  #app [style*="min-width: 1280px"]{--gx:18px !important}
  #app h1{font-size:36px !important}
  #app h2{font-size:29px !important}
  #app [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  #app [style*="grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #app [style*="display: flex"][style*="gap: 64px"],#app [style*="display: flex"][style*="gap: 72px"]{flex-direction:column !important}
  #app [style*="font-size: 19px"],#app [style*="font-size: 20px"]{font-size:17px !important}
  #app a.door{height:auto !important;min-height:190px;gap:18px}
  #app [style*="columns: 3;"]{columns:2 !important}
  /* vergelijkingstabel: horizontaal scrollen */
  #app [style*="grid-template-columns: 1.5fr repeat("]{grid-template-columns:140px repeat(5,112px) !important;width:max-content !important}
  #app :has(> [style*="grid-template-columns: 1.5fr repeat("]){overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  /* fotocollage in de Foto & Film-hero: compacter */
  #app [style*="flex-grow: 1; height: 580px; position: relative"]{display:none !important}
}

/* pakketten (Websites-pagina): horizontaal swipen in plaats van onder elkaar */
@media (max-width: 1000px){
  #app [style*="--pkgrid"]{display:flex !important;grid-template-columns:none !important;gap:14px !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 calc(-1 * var(--gx)) !important;padding:6px var(--gx) 18px !important;scroll-padding-left:var(--gx);box-sizing:border-box;max-width:none !important;width:auto !important}
  #app [style*="--pkgrid"]::-webkit-scrollbar{display:none}
  #app [style*="--pkgrid"] > *{flex:0 0 min(84%, 380px) !important;scroll-snap-align:start;min-width:0}
  #app [style*="--pkgrid"] > .lift:hover{transform:none}
}

/* portfolio: websites die nog in aanbouw zijn krijgen een balkje "Under construction" */
#app :has(> img[src*="lomiza-cover"]),#app :has(> img[src*="minnesma-cover"]){position:relative !important}
#app :has(> img[src*="lomiza-cover"])::after,#app :has(> img[src*="minnesma-cover"])::after{content:"Under construction";position:absolute;left:0;right:0;top:18px;z-index:2;
  padding:7px 12px;text-align:center;font:800 12px/1.2 'Poppins',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#18201D;
  background:repeating-linear-gradient(135deg,#F2C14E 0 18px,#E9B23A 18px 36px);box-shadow:0 0 0 2px #18201D inset,0 6px 14px rgba(20,20,18,.18);pointer-events:none}